@import url("/web/assets/brand/tokens.css");

/* Layer order: tokens -> document base -> reusable components -> breakpoints -> utilities. */
@layer public.foundation, public.base, public.components, public.pages, public.responsive, public.utilities;

@layer public.foundation {
/* Shared design tokens consumed by all public pages. */
:root {
  /* Typography. */
  --public-font-sans: var(--bt-font-sans, Inter, "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif);
  --public-font-display: var(--bt-font-sans, Inter, "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif);
  --public-font-mono: var(--bt-font-code, ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace);

  /* Core palette, surfaces, elevation, radius, and motion. */
  --public-color-canvas: var(--bt-color-background-soft, #f5f7fa);
  --public-color-canvas-soft: color-mix(in srgb, var(--bt-color-aqua, #4fc3f7) 6%, var(--bt-color-white, #ffffff));
  --public-color-canvas-muted: var(--bt-color-bg-soft, #f5f7fa);
  --public-color-white: var(--bt-color-white, #ffffff);
  --public-color-ink: var(--bt-color-text-primary, #1f2937);
  --public-color-ink-deep: var(--bt-color-text-primary, #1f2937);
  --public-color-copy: var(--bt-color-text-secondary, #4b5563);
  --public-color-muted: var(--bt-color-text-secondary, #4b5563);
  --public-color-muted-strong: var(--bt-color-text-secondary, #4b5563);
  --public-color-muted-cool: var(--bt-color-text-muted, #9ca3af);
  --public-color-muted-faint: var(--bt-color-text-muted, #9ca3af);
  --public-color-primary: var(--bt-color-primary, #0288d1);
  --public-color-primary-strong: var(--bt-color-deep-ocean, #0d47a1);
  --public-color-primary-soft: color-mix(in srgb, var(--bt-color-lagoon, #80deea) 26%, var(--bt-color-white, #ffffff));
  --public-color-accent: var(--bt-color-aqua, #4fc3f7);
  --public-color-blue: var(--bt-color-blue, #0288d1);
  --public-color-blue-strong: var(--bt-color-deep-ocean, #0d47a1);
  --public-color-success: #047857;
  --public-color-success-soft: #ecfdf5;
  --public-color-danger: #b91c1c;
  --public-color-danger-soft: #fef2f2;
  --public-color-danger-border: #fee2e2;
  --public-surface: rgba(255, 255, 255, 0.92);
  --public-surface-solid: var(--bt-color-white, #ffffff);
  --public-border-subtle: color-mix(in srgb, var(--bt-color-primary, #0288d1) 16%, transparent);
  --public-border-strong: color-mix(in srgb, var(--bt-color-deep-ocean, #0d47a1) 24%, transparent);
  --public-color-border-cool: color-mix(in srgb, var(--bt-color-primary, #0288d1) 14%, var(--bt-color-white, #ffffff));
  --public-color-border-soft: color-mix(in srgb, var(--bt-color-primary, #0288d1) 12%, var(--bt-color-white, #ffffff));
  --public-color-border-strong-cool: color-mix(in srgb, var(--bt-color-deep-ocean, #0d47a1) 24%, var(--bt-color-white, #ffffff));
  --public-shadow-page: 0 20px 60px rgba(13, 71, 161, 0.12);
  --public-shadow-card-soft: var(--bt-shadow-card, 0 12px 30px rgba(13, 71, 161, 0.12));
  --public-shadow-card-hover: 0 22px 46px rgba(13, 71, 161, 0.12);
  --public-shadow-avatar: 0 6px 14px rgba(13, 71, 161, 0.12);
  --public-radius-xl: var(--bt-radius-xl, 28px);
  --public-radius-lg: var(--bt-radius-lg, 20px);
  --public-radius-md: var(--bt-radius-md, 12px);
  --public-radius-sm: var(--bt-radius-sm, 8px);
  --public-radius-xs: var(--bt-radius-sm, 8px);
  --public-radius-pill: var(--bt-radius-pill, 999px);
  --public-transition-fast: 0.18s ease;
  --public-transition-base: 0.18s ease;
  --public-transition-motion: 180ms ease;

  /* Page shell and background atmosphere. */
  --public-page-bg-glow-start: rgba(79, 195, 247, 0.16);
  --public-page-bg-glow-end: rgba(13, 71, 161, 0.14);
  --public-page-bg-top: color-mix(in srgb, var(--bt-color-aqua, #4fc3f7) 7%, var(--bt-color-white, #ffffff));
  --public-page-overlay: rgba(255, 255, 255, 0.7);
  --public-page-pattern-line: rgba(13, 71, 161, 0.015);
  --public-banner-danger-border: rgba(165, 43, 61, 0.2);

  /* Shared form and control primitives. */
  --public-control-radius: var(--public-radius-sm);
  --public-control-radius-pill: var(--public-radius-pill);
  --public-control-bg: var(--public-color-white);
  --public-control-bg-soft: rgba(255, 255, 255, 0.58);
  --public-control-bg-hover: rgba(255, 255, 255, 0.9);
  --public-control-bg-secondary: rgba(255, 255, 255, 0.96);
  --public-control-bg-disabled: color-mix(in srgb, var(--bt-color-deep-ocean, #0d47a1) 4%, var(--bt-color-white, #ffffff));
  --public-control-border: var(--public-border-subtle);
  --public-control-border-hover: color-mix(in srgb, var(--bt-color-deep-ocean, #0d47a1) 34%, transparent);
  --public-control-border-soft: color-mix(in srgb, var(--bt-color-deep-ocean, #0d47a1) 12%, transparent);
  --public-control-border-soft-hover: color-mix(in srgb, var(--bt-color-deep-ocean, #0d47a1) 24%, transparent);
  --public-control-border-muted: color-mix(in srgb, var(--bt-color-deep-ocean, #0d47a1) 8%, transparent);
  --public-control-gradient-primary: linear-gradient(180deg, var(--bt-color-deep-ocean, #0d47a1), var(--bt-color-primary, #0288d1));
  --public-control-gradient-primary-hover: linear-gradient(180deg, var(--bt-color-deep-ocean, #0d47a1), var(--bt-color-primary, #0288d1));
  --public-control-text-soft: var(--bt-color-text-secondary, #4b5563);
  --public-control-text-disabled: rgba(79, 101, 125, 0.7);
  --public-control-shadow-hover: var(--bt-shadow-soft, 0 8px 20px rgba(2, 136, 209, 0.1));
  --public-control-transition:
    transform var(--public-transition-base),
    box-shadow var(--public-transition-base),
    border-color var(--public-transition-base),
    background var(--public-transition-base),
    color var(--public-transition-base);

  /* Media placeholders, empty states, and native control text. */
  --public-media-video-bg: #06111f;
  --public-card-cover-bg: color-mix(in srgb, var(--bt-color-deep-ocean, #0d47a1) 6%, var(--bt-color-white, #ffffff));
  --public-card-cover-placeholder-bg: var(--bt-gradient-lagoon, linear-gradient(135deg, #e0f7fa 0%, #ffffff 100%));
  --public-empty-border: 1px dashed color-mix(in srgb, var(--bt-color-deep-ocean, #0d47a1) 22%, transparent);
  --public-empty-bg: rgba(255, 255, 255, 0.84);
  --public-date-placeholder-text: var(--bt-color-text-muted, #9ca3af);

  /* Structured form, choice, and suggestion patterns. */
  --public-field-gap: 6px;
  --public-field-label-color: var(--public-color-copy);
  --public-field-font-size: 13px;
  --public-field-control-padding: 12px 14px;
  --public-field-control-border: 1px solid var(--public-border-subtle);
  --public-field-control-radius: var(--public-control-radius);
  --public-field-control-bg: var(--public-color-white);
  --public-field-control-color: var(--public-color-ink);
  --public-field-control-font-size: 14px;
  --public-field-control-line-height: 1.45;
  --public-field-control-focus-border: var(--trip-primary);
  --public-field-control-focus-ring: 0 0 0 3px color-mix(in srgb, var(--bt-color-primary, #0288d1) 18%, transparent);
  --public-field-textarea-min-height: 92px;
  --public-field-textarea-resize: vertical;
  --public-form-grid-display: grid;
  --public-form-grid-columns: repeat(auto-fit, minmax(200px, 1fr));
  --public-form-grid-gap: 12px;
  --public-field-stack-display: flex;
  --public-field-stack-direction: column;
  --public-field-stack-gap: 4px;
  --public-field-stack-font-size: var(--public-field-font-size);
  --public-field-stack-font-weight: 600;
  --public-field-required-color: var(--trip-danger-text);
  --public-field-required-style: normal;
  --public-field-required-margin-left: 2px;
  --public-choice-control-width: 100%;
  --public-choice-control-padding: 9px 11px;
  --public-choice-control-border: 1px solid var(--public-color-border-strong-cool);
  --public-choice-control-radius: var(--public-radius-xs);
  --public-choice-control-bg: var(--public-surface-solid);
  --public-choice-control-font-size: 14px;
  --public-choice-control-focus-outline: none;
  --public-choice-control-focus-border: var(--trip-primary);
  --public-choice-control-focus-ring: var(--public-field-control-focus-ring);
  --public-choice-control-disabled-bg: var(--public-color-canvas-muted);
  --public-choice-control-disabled-color: var(--public-color-muted-cool);
  --public-choice-control-disabled-cursor: not-allowed;
  --public-suggestion-panel-margin: 14px 0 0;
  --public-suggestion-panel-padding: 12px 14px;
  --public-suggestion-panel-bg: var(--trip-primary-soft);
  --public-suggestion-panel-border: 1px solid var(--public-border-subtle);
  --public-suggestion-panel-radius: var(--public-radius-xs);
  --public-suggestion-header-display: flex;
  --public-suggestion-header-align: baseline;
  --public-suggestion-header-gap: 8px;
  --public-suggestion-header-margin: 0 0 8px;
  --public-suggestion-title-font-size: 13px;
  --public-suggestion-title-color: var(--trip-primary);
  --public-suggestion-meta-font-size: 12px;
  --public-suggestion-meta-color: var(--trip-text-soft);
  --public-suggestion-list-display: grid;
  --public-suggestion-list-columns: repeat(auto-fill, minmax(220px, 1fr));
  --public-suggestion-list-gap: 6px;
  --public-suggestion-item-display: flex;
  --public-suggestion-item-direction: column;
  --public-suggestion-item-gap: 2px;
  --public-suggestion-item-position: relative;
  --public-suggestion-item-padding: 8px 10px;
  --public-suggestion-item-border: 1px solid var(--public-border-subtle);
  --public-suggestion-item-radius: var(--public-radius-xs);
  --public-suggestion-item-bg: var(--public-surface-solid);
  --public-suggestion-item-text-align: left;
  --public-suggestion-item-cursor: pointer;
  --public-suggestion-item-transition:
    border-color var(--public-transition-fast),
    background var(--public-transition-fast);
  --public-suggestion-item-hover-border: var(--trip-primary);
  --public-suggestion-item-hover-bg: var(--public-color-canvas-muted);
  --public-suggestion-item-title-font-size: 13px;
  --public-suggestion-item-title-font-weight: 600;
  --public-suggestion-item-text-font-size: 11px;
  --public-suggestion-item-text-color: var(--trip-text-soft);
  --public-suggestion-badge-position: absolute;
  --public-suggestion-badge-top: 6px;
  --public-suggestion-badge-right: 8px;
  --public-suggestion-badge-font-style: normal;
  --public-suggestion-badge-font-size: 11px;
  --public-suggestion-badge-color: var(--trip-primary);
  --public-suggestion-badge-font-weight: 700;

  /* Common page shells, hero blocks, and summary metrics. */
  --public-loading-padding: 80px 24px;
  --public-loading-text-align: center;
  --public-loading-color: var(--trip-text-soft);
  --public-loading-font-size: inherit;
  --public-shell-max-width: 1100px;
  --public-shell-margin: 0 auto;
  --public-shell-padding: 32px 24px 80px;
  --public-shell-padding-mobile: 16px 12px 60px;
  --public-hero-display: flex;
  --public-hero-flex-direction: row;
  --public-hero-flex-direction-mobile: var(--public-hero-flex-direction);
  --public-hero-align: center;
  --public-hero-justify: flex-start;
  --public-hero-gap: 18px;
  --public-hero-gap-mobile: var(--public-hero-gap);
  --public-hero-padding: 0;
  --public-hero-padding-mobile: var(--public-hero-padding);
  --public-hero-margin-bottom: 24px;
  --public-hero-bg: transparent;
  --public-hero-border: 0;
  --public-hero-radius: 0;
  --public-hero-title-margin: 0 0 4px;
  --public-hero-title-color: inherit;
  --public-hero-title-font-size: 24px;
  --public-hero-title-font-size-mobile: var(--public-hero-title-font-size);
  --public-hero-title-font-weight: 700;
  --public-hero-title-line-height: 1.2;
  --public-hero-copy-margin: 0;
  --public-hero-copy-color: var(--trip-text-soft);
  --public-hero-copy-font-family: inherit;
  --public-hero-copy-font-size: 14px;
  --public-hero-copy-font-weight: inherit;
  --public-hero-copy-line-height: 1.55;
  --public-metric-group-display: flex;
  --public-metric-group-gap: 8px;
  --public-metric-group-flex: 0 0 auto;
  --public-metric-card-display: flex;
  --public-metric-card-direction: column;
  --public-metric-card-align: center;
  --public-metric-card-min-width: 60px;
  --public-metric-card-padding: 8px 14px;
  --public-metric-card-border: 1px solid var(--public-border-subtle);
  --public-metric-card-radius: var(--public-radius-xs);
  --public-metric-card-bg: var(--public-surface-solid);
  --public-metric-card-text-align: center;
  --public-metric-card-warning-bg: var(--trip-warning-bg);
  --public-metric-card-warning-border: rgba(245, 158, 11, 0.34);
  --public-metric-value-font-size: 18px;
  --public-metric-value-font-weight: 700;
  --public-metric-label-color: var(--trip-text-soft);
  --public-metric-label-font-size: 11px;
  --public-stat-card-display: flex;
  --public-stat-card-direction: column;
  --public-stat-card-justify: normal;
  --public-stat-card-gap: 0;
  --public-stat-card-min-width: 0;
  --public-stat-card-min-height: auto;
  --public-stat-card-padding: 16px 18px;
  --public-stat-card-border: 1px solid var(--public-border-subtle);
  --public-stat-card-radius: var(--public-radius-md);
  --public-stat-card-bg: var(--public-surface-solid);
  --public-stat-value-font-size: 24px;
  --public-stat-value-line-height: 1;
  --public-stat-value-color: var(--public-color-ink);
  --public-stat-label-margin-top: 0;
  --public-stat-label-color: var(--public-color-muted-cool);
  --public-stat-label-font-size: inherit;
  --public-stat-label-line-height: normal;

  /* Chips, info cards, section headers, notices, and panels. */
  --public-chip-list-display: flex;
  --public-chip-list-wrap: wrap;
  --public-chip-list-gap: 8px;
  --public-chip-display: inline-flex;
  --public-chip-align: center;
  --public-chip-min-height: auto;
  --public-chip-padding: 6px 10px;
  --public-chip-border: 1px solid var(--public-border-subtle);
  --public-chip-radius: var(--public-radius-pill);
  --public-chip-bg: var(--public-color-canvas-soft);
  --public-chip-color: var(--public-color-muted);
  --public-chip-font-size: 12px;
  --public-chip-font-weight: 600;
  --public-chip-line-height: normal;
  --public-chip-soft-bg: var(--public-chip-bg);
  --public-chip-soft-border: var(--public-chip-border);
  --public-chip-soft-color: var(--public-chip-color);
  --public-info-grid-display: grid;
  --public-info-grid-columns: none;
  --public-info-grid-gap: 12px;
  --public-info-card-display: grid;
  --public-info-card-direction: column;
  --public-info-card-gap: 4px;
  --public-info-card-min-width: 0;
  --public-info-card-padding: 14px 16px;
  --public-info-card-border: 1px solid var(--public-border-subtle);
  --public-info-card-radius: var(--public-radius-md);
  --public-info-card-bg: var(--public-surface-solid);
  --public-info-label-color: var(--public-color-muted-cool);
  --public-info-label-font-size: 12px;
  --public-info-label-font-weight: inherit;
  --public-info-label-line-height: normal;
  --public-info-label-letter-spacing: normal;
  --public-info-label-text-transform: none;
  --public-info-value-color: var(--public-color-ink);
  --public-info-value-font-size: 15px;
  --public-info-value-line-height: normal;
  --public-info-value-word-break: normal;
  --public-section-head-display: flex;
  --public-section-head-align: center;
  --public-section-head-justify: space-between;
  --public-section-head-gap: 14px;
  --public-section-head-wrap: nowrap;
  --public-section-head-margin: 0 0 16px;
  --public-section-head-title-margin: 0;
  --public-section-head-title-color: var(--public-color-ink);
  --public-section-head-title-font-size: 22px;
  --public-section-head-title-font-weight: inherit;
  --public-section-head-title-line-height: 1.2;
  --public-section-head-copy-margin: 8px 0 0;
  --public-section-head-copy-max-width: none;
  --public-section-head-copy-color: var(--public-color-muted-strong);
  --public-section-head-copy-font-size: 14px;
  --public-section-head-copy-line-height: 1.6;
  --public-surface-card-margin: 0;
  --public-surface-card-padding: 22px;
  --public-surface-card-border: 1px solid var(--public-border-subtle);
  --public-surface-card-radius: var(--public-radius-lg);
  --public-surface-card-bg: var(--public-surface-solid);
  --public-surface-card-shadow: none;
  --public-notice-padding: 10px 14px;
  --public-notice-margin: 0 0 18px;
  --public-notice-border: 1px solid transparent;
  --public-notice-radius: var(--public-radius-xs);
  --public-notice-font-size: 14px;
  --public-notice-bg: var(--trip-primary-soft);
  --public-notice-color: var(--trip-primary);
  --public-notice-border-color: var(--public-border-subtle);
  --public-notice-success-bg: var(--trip-success-bg);
  --public-notice-success-color: var(--trip-success-text);
  --public-notice-success-border: rgba(16, 185, 129, 0.34);
  --public-notice-error-bg: var(--trip-danger-bg);
  --public-notice-error-color: var(--trip-danger-text);
  --public-notice-error-border: var(--public-color-danger-border);
  --public-notice-info-bg: var(--trip-primary-soft);
  --public-notice-info-color: var(--trip-primary);
  --public-notice-info-border: var(--public-border-subtle);
  --public-panel-max-width: 720px;
  --public-panel-margin: 80px auto;
  --public-panel-padding: 32px;
  --public-panel-text-align: center;
  --public-panel-bg: var(--public-surface-solid);
  --public-panel-border: 1px solid var(--public-border-subtle);
  --public-panel-radius: var(--public-radius-md);
  --public-panel-title-margin: 0 0 8px;
  --public-panel-title-color: var(--public-color-ink-deep);
  --public-panel-copy-margin: 0;
  --public-panel-copy-color: var(--public-color-muted-cool);
  --public-action-link-display: inline-block;
  --public-action-link-padding: 8px 16px;
  --public-action-link-bg: var(--trip-primary);
  --public-action-link-bg-hover: var(--trip-primary-strong);
  --public-action-link-color: var(--public-color-white);
  --public-action-link-radius: var(--public-radius-xs);
  --public-action-link-font-weight: 700;
  --public-action-link-text-decoration: none;
  --public-action-link-focus-ring: 0 0 0 3px rgba(15, 61, 115, 0.14);
  --public-text-link-display: inline-block;
  --public-text-link-margin: 0;
  --public-text-link-color: var(--trip-primary);
  --public-text-link-color-hover: var(--trip-primary-strong);
  --public-text-link-font-size: 14px;
  --public-text-link-font-weight: 700;
  --public-text-link-decoration: none;
  --public-text-link-decoration-hover: underline;
  --public-text-link-radius: 6px;
  --public-text-link-focus-outline: 2px solid currentColor;
  --public-text-link-focus-offset: 3px;
  --public-surface-panel-bg: var(--public-surface-solid);
  --public-surface-panel-border: 1px solid var(--public-border-subtle);
  --public-surface-panel-radius: var(--public-radius-md);
  --public-surface-panel-padding: 20px 24px;
  --public-surface-panel-margin: 0 0 20px;
  --public-surface-panel-header-display: flex;
  --public-surface-panel-header-justify: space-between;
  --public-surface-panel-header-align: flex-start;
  --public-surface-panel-header-gap: 0;
  --public-surface-panel-header-margin: 0 0 12px;
  --public-surface-panel-title-margin: 0 0 4px;
  --public-surface-panel-title-font-size: 16px;
  --public-surface-panel-title-font-weight: 600;
  --public-surface-panel-copy-margin: 0;
  --public-surface-panel-copy-color: var(--public-color-muted-cool);
  --public-surface-panel-copy-font-size: 12px;
  --public-callout-bg: var(--trip-primary-soft);
  --public-callout-border: 1px solid var(--public-border-subtle);
  --public-callout-radius: var(--public-radius-xs);
  --public-callout-padding: 8px 12px;
  --public-callout-margin: 0 0 12px;
  --public-callout-color: var(--trip-primary);
  --public-callout-font-size: 13px;
  --public-callout-link-color: var(--trip-primary);
  --public-callout-link-margin-left: 8px;
  --public-callout-link-font-weight: 600;
  --public-callout-link-text-decoration: none;
  --public-callout-link-hover-decoration: underline;
  --public-inline-empty-bg: var(--public-empty-bg);
  --public-inline-empty-border: var(--public-empty-border);
  --public-inline-empty-radius: var(--public-radius-xs);
  --public-inline-empty-padding: 16px;
  --public-inline-empty-color: var(--trip-text-soft);
  --public-inline-empty-font-size: 13px;
  --public-inline-empty-text-align: left;
  --public-empty-card-bg: var(--public-surface-solid);
  --public-empty-card-border: var(--public-empty-border);
  --public-empty-card-radius: var(--public-radius-md);
  --public-empty-card-padding: 32px;
  --public-empty-card-text-align: center;
  --public-empty-card-color: var(--trip-text-soft);
  --public-empty-card-icon-margin: 0 0 12px;
  --public-empty-card-icon-font-size: 42px;
  --public-empty-card-title-margin: 0 0 6px;
  --public-empty-card-title-color: inherit;
  --public-empty-card-title-font-size: 18px;
  --public-empty-card-title-font-weight: 700;
  --public-empty-card-copy-margin: 0;
  --public-empty-card-copy-color: inherit;
  --public-empty-card-copy-font-size: 14px;
  --public-empty-card-copy-line-height: 1.55;
  --public-option-panel-bg: var(--public-surface-solid);
  --public-option-panel-border: 1px solid var(--public-border-subtle);
  --public-option-panel-radius: var(--public-radius-md);
  --public-option-panel-padding: 14px 20px;
  --public-option-panel-margin: 0 0 20px;
  --public-checkbox-line-display: flex;
  --public-checkbox-line-align: center;
  --public-checkbox-line-gap: 10px;
  --public-checkbox-line-font-size: 13px;
  --public-checkbox-line-cursor: pointer;
  --public-content-panel-bg: var(--public-surface-solid);
  --public-content-panel-border: 1px solid var(--public-border-subtle);
  --public-content-panel-radius: var(--public-radius-md);
  --public-content-panel-padding: 18px 20px;
  --public-content-panel-margin: 0;
  --public-content-panel-header-display: flex;
  --public-content-panel-header-justify: space-between;
  --public-content-panel-header-align: center;
  --public-content-panel-header-margin: 0 0 14px;
  --public-content-panel-header-gap: 12px;
  --public-content-panel-header-wrap: wrap;
  --public-content-panel-title-margin: 0;
  --public-content-panel-title-font-size: 16px;
  --public-content-panel-title-font-weight: 600;
  --public-content-panel-meta-color: var(--public-color-muted-cool);
  --public-content-panel-meta-font-size: 13px;
  --public-content-panel-copy-margin: 0;
  --public-content-panel-copy-color: var(--public-color-muted-strong);
  --public-content-panel-copy-font-size: 14px;
  --public-content-panel-copy-line-height: 1.5;

  /* Showcase cards, galleries, overlays, and lightboxes. */
  --public-card-grid-display: grid;
  --public-card-grid-columns: repeat(auto-fill, minmax(200px, 1fr));
  --public-card-grid-gap: 14px;
  --public-card-grid-margin-top: 12px;
  --public-showcase-card-display: flex;
  --public-showcase-card-direction: column;
  --public-showcase-card-min-width: 0;
  --public-showcase-card-overflow: hidden;
  --public-showcase-card-border: 1px solid var(--public-border-subtle);
  --public-showcase-card-radius: var(--public-radius-md);
  --public-showcase-card-bg: var(--public-surface-solid);
  --public-showcase-card-shadow: var(--public-shadow-card-soft);
  --public-showcase-card-featured-border: var(--public-showcase-card-border);
  --public-showcase-card-featured-shadow: var(--public-showcase-card-shadow);
  --public-showcase-media-position: relative;
  --public-showcase-media-aspect-ratio: 16 / 10;
  --public-showcase-media-min-height: 0;
  --public-showcase-media-bg: var(--public-card-cover-placeholder-bg);
  --public-showcase-placeholder-display: flex;
  --public-showcase-placeholder-align: center;
  --public-showcase-placeholder-justify: center;
  --public-showcase-placeholder-color: var(--public-color-muted-strong);
  --public-showcase-placeholder-font-size: 14px;
  --public-showcase-placeholder-font-weight: 700;
  --public-showcase-asset-display: block;
  --public-showcase-asset-width: 100%;
  --public-showcase-asset-height: 100%;
  --public-showcase-asset-min-height: 0;
  --public-showcase-asset-fit: cover;
  --public-showcase-asset-bg: var(--public-card-cover-bg);
  --public-showcase-body-display: flex;
  --public-showcase-body-direction: column;
  --public-showcase-body-gap: 14px;
  --public-showcase-body-padding: 18px 20px;
  --public-showcase-row-display: flex;
  --public-showcase-row-align: center;
  --public-showcase-row-gap: 8px;
  --public-showcase-row-wrap: wrap;
  --public-showcase-head-justify: space-between;
  --public-showcase-logo-size: 28px;
  --public-showcase-logo-radius: var(--public-radius-pill);
  --public-showcase-logo-fit: cover;
  --public-showcase-logo-shadow: var(--public-shadow-avatar);
  --public-showcase-badge-display: inline-flex;
  --public-showcase-badge-align: center;
  --public-showcase-badge-justify: center;
  --public-showcase-badge-min-height: 28px;
  --public-showcase-badge-padding: 0 10px;
  --public-showcase-badge-radius: var(--public-radius-pill);
  --public-showcase-badge-bg: rgba(15, 61, 115, 0.08);
  --public-showcase-badge-color: var(--trip-primary);
  --public-showcase-badge-font-size: 11px;
  --public-showcase-badge-font-weight: 800;
  --public-showcase-badge-letter-spacing: 0.08em;
  --public-showcase-badge-text-transform: uppercase;
  --public-showcase-badge-soft-bg: var(--public-showcase-badge-bg);
  --public-showcase-badge-soft-color: var(--public-showcase-badge-color);
  --public-showcase-badge-rank-bg: var(--public-showcase-badge-bg);
  --public-showcase-badge-rank-color: var(--public-showcase-badge-color);
  --public-showcase-title-margin: 0;
  --public-showcase-title-color: var(--public-color-ink);
  --public-showcase-title-font-size: 22px;
  --public-showcase-title-font-weight: 800;
  --public-showcase-title-line-height: 1.28;
  --public-showcase-subtitle-margin: -4px 0 0;
  --public-showcase-subtitle-color: var(--public-color-muted-strong);
  --public-showcase-subtitle-font-size: 14px;
  --public-showcase-subtitle-line-height: 1.7;
  --public-showcase-facts-display: flex;
  --public-showcase-facts-gap: 10px 16px;
  --public-showcase-facts-wrap: wrap;
  --public-showcase-facts-color: var(--public-color-muted-cool);
  --public-showcase-facts-font-size: 13px;
  --public-showcase-facts-line-height: 1.6;
  --public-showcase-actions-display: flex;
  --public-showcase-actions-align: center;
  --public-showcase-actions-gap: 10px;
  --public-showcase-actions-wrap: wrap;
  --public-showcase-actions-margin-top: 2px;
  --public-showcase-actions-justify: normal;
  --public-showcase-action-flex: 1 1 132px;
  --public-cta-panel-display: flex;
  --public-cta-panel-direction: row;
  --public-cta-panel-columns: none;
  --public-cta-panel-align: center;
  --public-cta-panel-justify: normal;
  --public-cta-panel-gap: 18px;
  --public-cta-panel-margin-top: 0;
  --public-cta-panel-padding: 22px;
  --public-cta-panel-border: 1px solid var(--public-border-subtle);
  --public-cta-panel-radius: var(--public-radius-md);
  --public-cta-panel-bg: var(--public-surface-solid);
  --public-cta-copy-display: block;
  --public-cta-copy-gap: 0;
  --public-cta-copy-min-width: 0;
  --public-cta-copy-max-width: none;
  --public-cta-actions-display: flex;
  --public-cta-actions-align: center;
  --public-cta-actions-justify: flex-start;
  --public-cta-actions-flex-shrink: 1;
  --public-cta-actions-min-width: 0;
  --public-cta-badge-display: inline-flex;
  --public-cta-badge-margin-bottom: 0;
  --public-cta-badge-padding: 0;
  --public-cta-badge-radius: var(--public-radius-pill);
  --public-cta-badge-bg: transparent;
  --public-cta-badge-color: inherit;
  --public-cta-badge-font-size: 12px;
  --public-cta-badge-font-weight: inherit;
  --public-cta-badge-letter-spacing: normal;
  --public-cta-badge-text-transform: none;
  --public-gallery-card-margin: 0;
  --public-gallery-card-bg: var(--public-surface-solid);
  --public-gallery-card-border: 1px solid var(--public-border-subtle);
  --public-gallery-card-radius: var(--public-radius-xs);
  --public-gallery-card-overflow: hidden;
  --public-gallery-card-transition: var(--public-transition-fast);
  --public-gallery-card-hover-border: var(--trip-primary);
  --public-gallery-card-hover-shadow: none;
  --public-gallery-media-position: relative;
  --public-gallery-media-display: block;
  --public-gallery-media-width: 100%;
  --public-gallery-media-padding: 0;
  --public-gallery-media-border: 0;
  --public-gallery-media-bg: var(--public-color-canvas-muted);
  --public-gallery-media-aspect-ratio: 4 / 3;
  --public-gallery-media-min-height: 0;
  --public-gallery-media-cursor: pointer;
  --public-gallery-media-overflow: hidden;
  --public-gallery-media-img-display: block;
  --public-gallery-media-img-width: 100%;
  --public-gallery-media-img-height: 100%;
  --public-gallery-media-img-fit: cover;
  --public-gallery-placeholder-display: flex;
  --public-gallery-placeholder-align: center;
  --public-gallery-placeholder-justify: center;
  --public-gallery-placeholder-width: 100%;
  --public-gallery-placeholder-height: 100%;
  --public-gallery-placeholder-color: var(--public-color-border-strong-cool);
  --public-gallery-placeholder-font-size: 36px;
  --public-gallery-badge-position: absolute;
  --public-gallery-badge-bottom: 8px;
  --public-gallery-badge-right: 8px;
  --public-gallery-badge-padding: 2px 8px;
  --public-gallery-badge-radius: var(--public-radius-pill);
  --public-gallery-badge-bg: rgba(0, 0, 0, 0.6);
  --public-gallery-badge-color: var(--public-color-white);
  --public-gallery-badge-font-size: 11px;
  --public-gallery-caption-display: flex;
  --public-gallery-caption-direction: column;
  --public-gallery-caption-gap: 2px;
  --public-gallery-caption-padding: 8px 10px 10px;
  --public-gallery-caption-title-color: var(--public-color-ink-deep);
  --public-gallery-caption-title-font-size: 13px;
  --public-gallery-caption-title-font-weight: 600;
  --public-gallery-caption-title-white-space: nowrap;
  --public-gallery-caption-title-overflow: hidden;
  --public-gallery-caption-title-text-overflow: ellipsis;
  --public-gallery-caption-subtitle-color: var(--public-color-muted-cool);
  --public-gallery-caption-subtitle-font-size: 11px;
  --public-feature-gallery-display: grid;
  --public-feature-gallery-columns: 1fr;
  --public-feature-gallery-gap: 16px;
  --public-feature-gallery-align: start;
  --public-feature-gallery-stage-position: relative;
  --public-feature-gallery-stage-display: block;
  --public-feature-gallery-stage-width: 100%;
  --public-feature-gallery-stage-appearance: none;
  --public-feature-gallery-stage-margin: 0;
  --public-feature-gallery-stage-padding: 0;
  --public-feature-gallery-stage-border: 0;
  --public-feature-gallery-stage-radius: var(--public-radius-lg);
  --public-feature-gallery-stage-overflow: hidden;
  --public-feature-gallery-stage-bg: var(--public-color-ink-deep);
  --public-feature-gallery-stage-shadow: none;
  --public-feature-gallery-stage-cursor: pointer;
  --public-feature-gallery-stage-text-align: inherit;
  --public-feature-gallery-stage-font: inherit;
  --public-feature-gallery-image-display: block;
  --public-feature-gallery-image-width: 100%;
  --public-feature-gallery-image-aspect-ratio: 16 / 10;
  --public-feature-gallery-image-fit: cover;
  --public-feature-gallery-image-opacity: 1;
  --public-feature-gallery-hint-position: absolute;
  --public-feature-gallery-hint-left: auto;
  --public-feature-gallery-hint-right: 16px;
  --public-feature-gallery-hint-bottom: 16px;
  --public-feature-gallery-hint-display: inline-flex;
  --public-feature-gallery-hint-align: center;
  --public-feature-gallery-hint-min-height: auto;
  --public-feature-gallery-hint-padding: 8px 12px;
  --public-feature-gallery-hint-radius: var(--public-radius-pill);
  --public-feature-gallery-hint-bg: rgba(15, 23, 42, 0.72);
  --public-feature-gallery-hint-color: var(--public-color-white);
  --public-feature-gallery-hint-font-size: 12px;
  --public-feature-gallery-hint-font-weight: inherit;
  --public-feature-gallery-thumbs-display: grid;
  --public-feature-gallery-thumbs-columns: none;
  --public-feature-gallery-thumbs-gap: 10px;
  --public-feature-gallery-thumbs-max-height: none;
  --public-feature-gallery-thumbs-overflow-y: visible;
  --public-feature-gallery-thumb-appearance: none;
  --public-feature-gallery-thumb-border: 1px solid var(--public-border-subtle);
  --public-feature-gallery-thumb-radius: var(--public-radius-sm);
  --public-feature-gallery-thumb-padding: 0;
  --public-feature-gallery-thumb-overflow: hidden;
  --public-feature-gallery-thumb-bg: var(--public-surface-solid);
  --public-feature-gallery-thumb-cursor: pointer;
  --public-feature-gallery-thumb-transition: var(--public-transition-fast);
  --public-feature-gallery-thumb-active-border: var(--trip-primary);
  --public-feature-gallery-thumb-active-shadow: none;
  --public-feature-gallery-thumb-active-transform: none;
  --public-feature-gallery-thumb-image-display: block;
  --public-feature-gallery-thumb-image-width: 100%;
  --public-feature-gallery-thumb-image-aspect-ratio: 1;
  --public-feature-gallery-thumb-image-fit: cover;
  --public-overlay-media-card-position: relative;
  --public-overlay-media-card-min-height: 190px;
  --public-overlay-media-card-overflow: hidden;
  --public-overlay-media-card-radius: var(--public-radius-lg);
  --public-overlay-media-card-bg: var(--public-color-border-cool);
  --public-overlay-media-asset-display: block;
  --public-overlay-media-asset-width: 100%;
  --public-overlay-media-asset-height: 100%;
  --public-overlay-media-asset-min-height: var(--public-overlay-media-card-min-height);
  --public-overlay-media-asset-fit: cover;
  --public-overlay-media-caption-position: absolute;
  --public-overlay-media-caption-left: 10px;
  --public-overlay-media-caption-right: 10px;
  --public-overlay-media-caption-bottom: 10px;
  --public-overlay-media-caption-display: grid;
  --public-overlay-media-caption-gap: 3px;
  --public-overlay-media-caption-padding: 9px 10px;
  --public-overlay-media-caption-radius: var(--public-radius-md);
  --public-overlay-media-caption-bg: rgba(8, 38, 72, 0.72);
  --public-overlay-media-caption-color: var(--public-color-white);
  --public-overlay-media-caption-filter: blur(10px);
  --public-overlay-media-tags-display: flex;
  --public-overlay-media-tags-wrap: wrap;
  --public-overlay-media-tags-gap: 4px;
  --public-overlay-media-meta-color: rgba(255, 255, 255, 0.72);
  --public-overlay-media-meta-font-size: 10px;
  --public-overlay-media-meta-font-weight: 900;
  --public-overlay-media-meta-text-transform: uppercase;
  --public-overlay-media-tag-width: fit-content;
  --public-overlay-media-tag-padding: 3px 6px;
  --public-overlay-media-tag-radius: var(--public-radius-pill);
  --public-overlay-media-tag-bg: rgba(255, 255, 255, 0.18);
  --public-overlay-media-tag-color: var(--public-color-white);
  --public-overlay-media-tag-font-size: 10px;
  --public-overlay-media-tag-font-weight: 950;
  --public-overlay-media-tag-line-height: 1.2;
  --public-overlay-media-tag-text-transform: none;
  --public-overlay-media-title-font-size: 12px;
  --public-lightbox-position: fixed;
  --public-lightbox-inset: 0;
  --public-lightbox-z-index: 1000;
  --public-lightbox-display: flex;
  --public-lightbox-align-items: center;
  --public-lightbox-justify-content: center;
  --public-lightbox-justify-items: normal;
  --public-lightbox-padding: 16px;
  --public-lightbox-bg: transparent;
  --public-lightbox-backdrop-position: absolute;
  --public-lightbox-backdrop-inset: 0;
  --public-lightbox-backdrop-padding: 0;
  --public-lightbox-backdrop-border: 0;
  --public-lightbox-backdrop-bg: rgba(0, 0, 0, 0.86);
  --public-lightbox-backdrop-filter: none;
  --public-lightbox-backdrop-cursor: auto;
  --public-lightbox-stage-position: relative;
  --public-lightbox-stage-z-index: auto;
  --public-lightbox-stage-display: block;
  --public-lightbox-stage-width: auto;
  --public-lightbox-stage-max-width: 95vw;
  --public-lightbox-stage-max-height: 95vh;
  --public-lightbox-stage-overflow: visible;
  --public-lightbox-stage-padding: 0;
  --public-lightbox-stage-radius: 0;
  --public-lightbox-stage-bg: transparent;
  --public-lightbox-stage-shadow: none;
  --public-lightbox-media-display: block;
  --public-lightbox-media-width: auto;
  --public-lightbox-media-max-width: 95vw;
  --public-lightbox-media-max-height: 95vh;
  --public-lightbox-media-fit: contain;
  --public-lightbox-media-radius: 0;
  --public-lightbox-media-bg: transparent;
  --public-lightbox-media-shadow: none;
  --public-lightbox-close-position: absolute;
  --public-lightbox-close-top: -14px;
  --public-lightbox-close-right: -14px;
  --public-lightbox-close-z-index: auto;
  --public-lightbox-close-size: 36px;
  --public-lightbox-close-border: 0;
  --public-lightbox-close-radius: 50%;
  --public-lightbox-close-bg: var(--public-surface-solid);
  --public-lightbox-close-color: inherit;
  --public-lightbox-close-font-size: 22px;
  --public-lightbox-close-line-height: normal;
  --public-lightbox-close-cursor: pointer;
  --public-lightbox-close-display: flex;
  --public-lightbox-close-align: center;
  --public-lightbox-close-justify: center;
  --public-lightbox-close-shadow: none;
  --public-action-bar-display: flex;
  --public-action-bar-gap: 6px;
  --public-action-button-padding: 8px 14px;
  --public-action-button-radius: var(--public-radius-xs);
  --public-action-button-border: 1px solid var(--public-color-border-strong-cool);
  --public-action-button-bg: var(--public-surface-solid);
  --public-action-button-color: inherit;
  --public-action-button-cursor: pointer;
  --public-action-button-font-size: 13px;
  --public-action-button-font-weight: 600;
  --public-action-button-transition: all var(--public-transition-fast);
  --public-action-button-primary-bg: var(--trip-primary);
  --public-action-button-primary-color: var(--public-color-white);
  --public-action-button-primary-border: var(--trip-primary);
  --public-action-button-primary-hover-bg: var(--trip-primary-strong);
  --public-action-button-disabled-opacity: 0.55;
  --public-action-button-disabled-cursor: not-allowed;
  --public-action-button-secondary-hover-bg: var(--public-color-canvas-muted);

  /* Lists, media rows, progress, icon actions, and segmented controls. */
  --public-list-stack-display: flex;
  --public-list-stack-direction: column;
  --public-list-stack-gap: 8px;
  --public-media-row-display: grid;
  --public-media-row-columns: 60px 1fr auto auto;
  --public-media-row-gap: 12px;
  --public-media-row-align: center;
  --public-media-row-padding: 10px 12px;
  --public-media-row-border: 1px solid var(--public-color-border-cool);
  --public-media-row-radius: var(--public-radius-xs);
  --public-media-row-success-bg: var(--public-color-success-soft);
  --public-media-row-success-border: rgba(4, 120, 87, 0.35);
  --public-media-row-error-bg: var(--public-color-danger-soft);
  --public-media-row-error-border: var(--public-color-danger-border);
  --public-media-row-active-bg: var(--public-color-primary-soft);
  --public-media-row-active-border: var(--public-border-subtle);
  --public-media-thumb-size: 60px;
  --public-media-thumb-radius: var(--public-radius-xs);
  --public-media-thumb-bg: var(--public-color-canvas-muted);
  --public-media-thumb-display: flex;
  --public-media-thumb-align: center;
  --public-media-thumb-justify: center;
  --public-media-thumb-overflow: hidden;
  --public-media-thumb-img-fit: cover;
  --public-media-thumb-placeholder-font-size: 28px;
  --public-media-thumb-placeholder-color: var(--public-color-muted-cool);
  --public-media-meta-display: flex;
  --public-media-meta-direction: column;
  --public-media-meta-gap: 2px;
  --public-media-meta-min-width: 0;
  --public-media-meta-title-font-size: 13px;
  --public-media-meta-title-font-weight: 600;
  --public-media-meta-title-white-space: nowrap;
  --public-media-meta-title-overflow: hidden;
  --public-media-meta-title-text-overflow: ellipsis;
  --public-media-meta-subtitle-font-size: 11px;
  --public-media-meta-subtitle-color: var(--public-color-muted-cool);
  --public-progress-height: 4px;
  --public-progress-bg: var(--public-color-border-cool);
  --public-progress-radius: 2px;
  --public-progress-overflow: hidden;
  --public-progress-margin-top: 4px;
  --public-progress-fill-bg: var(--trip-primary);
  --public-progress-fill-transition: width 120ms ease;
  --public-status-text-font-size: 12px;
  --public-status-text-color: var(--public-color-muted-cool);
  --public-status-text-align: right;
  --public-status-text-min-width: 80px;
  --public-status-text-font-weight: 600;
  --public-status-text-success-color: var(--public-color-success);
  --public-status-text-error-color: var(--public-color-danger);
  --public-icon-actions-display: flex;
  --public-icon-actions-gap: 4px;
  --public-icon-action-border: 0;
  --public-icon-action-bg: transparent;
  --public-icon-action-font-size: 16px;
  --public-icon-action-cursor: pointer;
  --public-icon-action-size: 28px;
  --public-icon-action-radius: 6px;
  --public-icon-action-color: var(--public-color-muted-cool);
  --public-icon-action-hover-bg: var(--public-color-canvas-muted);
  --public-icon-action-hover-color: var(--public-color-ink-deep);
  --public-segmented-display: flex;
  --public-segmented-gap: 6px;
  --public-segmented-margin: 0 0 14px;
  --public-segmented-wrap: wrap;
  --public-segmented-option-bg: var(--public-surface-solid);
  --public-segmented-option-border: 1px solid var(--public-border-subtle);
  --public-segmented-option-padding: 7px 12px;
  --public-segmented-option-radius: var(--public-radius-pill);
  --public-segmented-option-color: inherit;
  --public-segmented-option-font-size: 13px;
  --public-segmented-option-cursor: pointer;
  --public-segmented-option-transition:
    background var(--public-transition-fast),
    border-color var(--public-transition-fast),
    color var(--public-transition-fast);
  --public-segmented-option-hover-bg: var(--public-color-canvas-muted);
  --public-segmented-option-active-bg: var(--trip-primary);
  --public-segmented-option-active-color: var(--public-color-white);
  --public-segmented-option-active-border: var(--trip-primary);

  /* Legacy trip aliases kept for existing public pages. */
  --trip-bg: var(--public-color-canvas);
  --trip-surface: var(--public-surface);
  --trip-surface-strong: var(--public-surface-solid);
  --trip-border: var(--public-border-subtle);
  --trip-border-strong: var(--public-border-strong);
  --trip-text: var(--public-color-ink);
  --trip-text-soft: var(--public-color-muted);
  --trip-primary: var(--public-color-primary);
  --trip-primary-strong: var(--public-color-primary-strong);
  --trip-primary-soft: var(--public-color-primary-soft);
  --trip-accent: var(--public-color-accent);
  --trip-warning-bg: #fff1d8;
  --trip-warning-text: #9a5a00;
  --trip-success-bg: #e4f7ec;
  --trip-success-text: #0f7a46;
  --trip-danger-bg: #fde7ea;
  --trip-danger-text: #a52b3d;
  --trip-shadow: var(--public-shadow-page);
  --trip-radius-xl: var(--public-radius-xl);
  --trip-radius-lg: var(--public-radius-lg);
  --trip-radius-md: var(--public-radius-md);
}
}

@layer public.base {
/* Document-level defaults and public app root sizing. */
html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background:
    radial-gradient(circle at top left, var(--public-page-bg-glow-start), transparent 34%),
    radial-gradient(circle at top right, var(--public-page-bg-glow-end), transparent 28%),
    linear-gradient(180deg, var(--public-page-bg-top) 0%, var(--trip-bg) 100%);
  color: var(--trip-text);
  font-family: var(--public-font-sans);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, var(--public-page-overlay), transparent 36%),
    repeating-linear-gradient(
      135deg,
      var(--public-page-pattern-line) 0,
      var(--public-page-pattern-line) 2px,
      transparent 2px,
      transparent 12px
    );
}

.public-app-root {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 100%;
}

.public-app-root *,
.public-app-root *::before,
.public-app-root *::after {
  box-sizing: inherit;
}
}

@layer public.components {
/* Reusable public-page components shared by catalog, works, and profile pages. */
.trip-catalog-page {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 24px 24px 64px;
  box-sizing: border-box;
}

.trip-page-title {
  margin: 16px 0 0;
  font-family: var(--public-font-display);
  font-size: 56px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--trip-primary-strong);
}

.trip-page-error {
  color: var(--trip-danger-text);
}

.public-page-fallback {
  box-sizing: border-box;
  max-width: 960px;
  margin: 40px auto;
  padding: 24px;
  font-family: var(--public-font-sans);
}

.public-page-fallback__title {
  margin: 0 0 12px;
  color: var(--public-color-ink-deep);
}

.public-page-fallback__text {
  margin: 0;
  color: var(--public-color-danger);
}

.public-page-fallback__actions {
  margin: 16px 0 0;
}

.public-page-fallback__link {
  color: var(--public-color-primary);
  font-weight: 700;
  text-decoration: none;
}

.public-page-fallback__link:hover,
.public-page-fallback__link:focus-visible {
  text-decoration: underline;
}

.trip-banner {
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.6;
}

.trip-banner-error {
  border: 1px solid var(--public-banner-danger-border);
  background: var(--trip-danger-bg);
  color: var(--trip-danger-text);
}

.trip-banner-loading {
  border: 1px solid var(--public-control-border);
  background: var(--trip-primary-soft);
  color: var(--trip-primary);
}

.trip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--public-control-radius);
  border: 1px solid var(--public-control-border);
  background: var(--public-control-bg);
  color: var(--trip-primary-strong);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: var(--public-control-transition);
  box-sizing: border-box;
}

.trip-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--public-control-border-hover);
  box-shadow: var(--public-control-shadow-hover);
}

.trip-btn-primary {
  border-color: var(--trip-primary);
  background: var(--public-control-gradient-primary);
  color: var(--public-color-white);
}

.trip-btn-primary:hover:not(:disabled) {
  border-color: var(--trip-primary-strong);
  background: var(--public-control-gradient-primary-hover);
}

.trip-btn-secondary {
  background: var(--public-control-bg-secondary);
}

.public-media-image,
.public-media-video {
  display: block;
  max-width: 100%;
}

.public-media-video {
  background: var(--public-media-video-bg);
}

.trip-btn-tertiary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--public-control-border-soft);
  border-radius: var(--public-control-radius-pill);
  background: var(--public-control-bg-soft);
  color: var(--public-control-text-soft);
  font-size: 14px;
  font-weight: 700;
  transition: var(--public-control-transition);
}

.trip-btn-tertiary:hover {
  transform: translateY(-1px);
  border-color: var(--public-control-border-soft-hover);
  background: var(--public-control-bg-hover);
  color: var(--trip-primary);
}

.trip-btn-disabled,
.trip-btn:disabled {
  cursor: not-allowed;
  border-color: var(--public-control-border-muted);
  background: var(--public-control-bg-disabled);
  color: var(--public-control-text-disabled);
  box-shadow: none;
}

.trip-empty {
  padding: 30px 20px;
  border: var(--public-empty-border);
  border-radius: 18px;
  background: var(--public-empty-bg);
  text-align: center;
  color: var(--trip-text-soft);
  font-size: 15px;
  line-height: 1.8;
}

.trip-empty strong {
  display: block;
  color: var(--trip-primary-strong);
  font-size: 18px;
  margin-bottom: 8px;
}

.trip-empty-hint {
  font-size: 14px;
  color: var(--trip-text-soft);
}

:where(.public-form-field, .public-fulfillment-field) {
  display: grid;
  gap: var(--public-field-gap);
  color: var(--public-field-label-color);
  font-size: var(--public-field-font-size);
}

:where(.public-form-field--wide, .public-fulfillment-field--wide) {
  grid-column: 1 / -1;
}

:where(.public-form-field, .public-fulfillment-field) :where(input, select, textarea) {
  box-sizing: border-box;
  width: 100%;
  padding: var(--public-field-control-padding);
  border: var(--public-field-control-border);
  border-radius: var(--public-field-control-radius);
  background: var(--public-field-control-bg);
  color: var(--public-field-control-color);
  font: inherit;
  font-size: var(--public-field-control-font-size);
  line-height: var(--public-field-control-line-height);
}

:where(.public-form-field, .public-fulfillment-field) :where(input, select, textarea):focus-visible {
  outline: 0;
  border-color: var(--public-field-control-focus-border);
  box-shadow: var(--public-field-control-focus-ring);
}

:where(.public-form-field, .public-fulfillment-field) textarea {
  min-height: var(--public-field-textarea-min-height);
  resize: var(--public-field-textarea-resize);
}

:where(.public-form-grid, .works-upload-geo__cascade) {
  display: var(--public-form-grid-display);
  grid-template-columns: var(--public-form-grid-columns);
  gap: var(--public-form-grid-gap);
}

/* 2026-05-18 #401：tripLocked 模式下多 region 候选时高亮区域下拉，
   提示用户「请选你这次去的那个」。 */
.works-upload-geo__cascade label.works-upload-geo__region--needs-pick > select {
  border-color: var(--bt-color-sunlight, #ffb74d);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bt-color-sunlight, #ffb74d) 32%, transparent);
  background: color-mix(in srgb, var(--bt-color-sunlight, #ffb74d) 18%, var(--bt-color-white, #ffffff));
}
.works-upload-geo__cascade label.works-upload-geo__region--needs-pick > span {
  color: #b45309;
}

:where(.public-field-stack, .works-upload-geo__cascade label) {
  display: var(--public-field-stack-display);
  flex-direction: var(--public-field-stack-direction);
  gap: var(--public-field-stack-gap);
  font-size: var(--public-field-stack-font-size);
  font-weight: var(--public-field-stack-font-weight);
}

:where(.public-field-required, .works-upload-geo__cascade label em) {
  margin-left: var(--public-field-required-margin-left);
  color: var(--public-field-required-color);
  font-style: var(--public-field-required-style);
}

:where(.public-choice-control, .works-upload-geo__cascade select) {
  width: var(--public-choice-control-width);
  padding: var(--public-choice-control-padding);
  border: var(--public-choice-control-border);
  border-radius: var(--public-choice-control-radius);
  background: var(--public-choice-control-bg);
  font-size: var(--public-choice-control-font-size);
}

:where(.public-choice-control, .works-upload-geo__cascade select):focus {
  outline: var(--public-choice-control-focus-outline);
  border-color: var(--public-choice-control-focus-border);
  box-shadow: var(--public-choice-control-focus-ring);
}

:where(.public-choice-control, .works-upload-geo__cascade select):disabled {
  background: var(--public-choice-control-disabled-bg);
  color: var(--public-choice-control-disabled-color);
  cursor: var(--public-choice-control-disabled-cursor);
}

:where(.public-suggestion-panel, .works-upload-gps-suggest) {
  margin: var(--public-suggestion-panel-margin);
  padding: var(--public-suggestion-panel-padding);
  border: var(--public-suggestion-panel-border);
  border-radius: var(--public-suggestion-panel-radius);
  background: var(--public-suggestion-panel-bg);
}

:where(.public-suggestion-panel__header, .works-upload-gps-suggest header) {
  display: var(--public-suggestion-header-display);
  align-items: var(--public-suggestion-header-align);
  gap: var(--public-suggestion-header-gap);
  margin: var(--public-suggestion-header-margin);
}

:where(.public-suggestion-panel__title, .works-upload-gps-suggest header strong) {
  color: var(--public-suggestion-title-color);
  font-size: var(--public-suggestion-title-font-size);
}

:where(.public-suggestion-panel__meta, .works-upload-gps-suggest header small) {
  color: var(--public-suggestion-meta-color);
  font-size: var(--public-suggestion-meta-font-size);
}

:where(.public-suggestion-panel__list, .works-upload-gps-suggest__list) {
  display: var(--public-suggestion-list-display);
  grid-template-columns: var(--public-suggestion-list-columns);
  gap: var(--public-suggestion-list-gap);
}

:where(.public-suggestion-panel__item, .works-upload-gps-suggest__item) {
  position: var(--public-suggestion-item-position);
  display: var(--public-suggestion-item-display);
  flex-direction: var(--public-suggestion-item-direction);
  gap: var(--public-suggestion-item-gap);
  padding: var(--public-suggestion-item-padding);
  border: var(--public-suggestion-item-border);
  border-radius: var(--public-suggestion-item-radius);
  background: var(--public-suggestion-item-bg);
  text-align: var(--public-suggestion-item-text-align);
  cursor: var(--public-suggestion-item-cursor);
  transition: var(--public-suggestion-item-transition);
}

:where(.public-suggestion-panel__item, .works-upload-gps-suggest__item):hover {
  border-color: var(--public-suggestion-item-hover-border);
  background: var(--public-suggestion-item-hover-bg);
}

:where(.public-suggestion-panel__item-title, .works-upload-gps-suggest__item strong) {
  font-size: var(--public-suggestion-item-title-font-size);
  font-weight: var(--public-suggestion-item-title-font-weight);
}

:where(.public-suggestion-panel__item-text, .works-upload-gps-suggest__item span) {
  color: var(--public-suggestion-item-text-color);
  font-size: var(--public-suggestion-item-text-font-size);
}

:where(.public-suggestion-panel__badge, .works-upload-gps-suggest__item em) {
  position: var(--public-suggestion-badge-position);
  top: var(--public-suggestion-badge-top);
  right: var(--public-suggestion-badge-right);
  color: var(--public-suggestion-badge-color);
  font-size: var(--public-suggestion-badge-font-size);
  font-style: var(--public-suggestion-badge-font-style);
  font-weight: var(--public-suggestion-badge-font-weight);
}

:where(.public-page-shell, .public-portfolio:not(.public-portfolio--error), .works-upload:not(.works-upload--gated)) {
  max-width: var(--public-shell-max-width);
  margin: var(--public-shell-margin);
  padding: var(--public-shell-padding);
}

:where(.public-page-hero, .public-portfolio__hero, .works-upload__hero) {
  display: var(--public-hero-display);
  flex-direction: var(--public-hero-flex-direction);
  align-items: var(--public-hero-align);
  justify-content: var(--public-hero-justify);
  gap: var(--public-hero-gap);
  margin-bottom: var(--public-hero-margin-bottom);
  padding: var(--public-hero-padding);
  border: var(--public-hero-border);
  border-radius: var(--public-hero-radius);
  background: var(--public-hero-bg);
}

:where(.public-hero-title, .public-portfolio__id h1, .works-upload__hero h1) {
  margin: var(--public-hero-title-margin);
  color: var(--public-hero-title-color);
  font-size: var(--public-hero-title-font-size);
  font-weight: var(--public-hero-title-font-weight);
  line-height: var(--public-hero-title-line-height);
}

:where(.public-hero-copy, .public-portfolio__id span, .works-upload__hero p) {
  margin: var(--public-hero-copy-margin);
  color: var(--public-hero-copy-color);
  font-family: var(--public-hero-copy-font-family);
  font-size: var(--public-hero-copy-font-size);
  font-weight: var(--public-hero-copy-font-weight);
  line-height: var(--public-hero-copy-line-height);
}

:where(.public-metric-group, .works-upload__hero-stats) {
  display: var(--public-metric-group-display);
  gap: var(--public-metric-group-gap);
  flex: var(--public-metric-group-flex);
}

:where(.public-metric-card, .works-upload__stat) {
  display: var(--public-metric-card-display);
  flex-direction: var(--public-metric-card-direction);
  align-items: var(--public-metric-card-align);
  min-width: var(--public-metric-card-min-width);
  padding: var(--public-metric-card-padding);
  border: var(--public-metric-card-border);
  border-radius: var(--public-metric-card-radius);
  background: var(--public-metric-card-bg);
  text-align: var(--public-metric-card-text-align);
}

:where(.public-metric-card__value, .works-upload__stat b) {
  font-size: var(--public-metric-value-font-size);
  font-weight: var(--public-metric-value-font-weight);
}

:where(.public-metric-card__label, .works-upload__stat small) {
  color: var(--public-metric-label-color);
  font-size: var(--public-metric-label-font-size);
}

:where(.public-metric-card--warning, .works-upload__stat.is-pending) {
  border-color: var(--public-metric-card-warning-border);
  background: var(--public-metric-card-warning-bg);
}

:where(.public-stat-card, .product-profile-stat, .route-profile-stat) {
  display: var(--public-stat-card-display);
  flex-direction: var(--public-stat-card-direction);
  justify-content: var(--public-stat-card-justify);
  gap: var(--public-stat-card-gap);
  min-width: var(--public-stat-card-min-width);
  min-height: var(--public-stat-card-min-height);
  padding: var(--public-stat-card-padding);
  border: var(--public-stat-card-border);
  border-radius: var(--public-stat-card-radius);
  background: var(--public-stat-card-bg);
}

:where(.public-stat-card__value, .product-profile-stat-value, .route-profile-stat__value) {
  color: var(--public-stat-value-color);
  font-size: var(--public-stat-value-font-size);
  line-height: var(--public-stat-value-line-height);
}

:where(.public-stat-card__label, .product-profile-stat-label, .route-profile-stat__label) {
  margin-top: var(--public-stat-label-margin-top);
  color: var(--public-stat-label-color);
  font-size: var(--public-stat-label-font-size);
  line-height: var(--public-stat-label-line-height);
}

:where(.public-chip-list, .product-profile-chip-list, .product-profile-product-routes, .dive-site-tag-wall, .route-profile-dive-card__tags) {
  display: var(--public-chip-list-display);
  flex-wrap: var(--public-chip-list-wrap);
  gap: var(--public-chip-list-gap);
}

:where(.public-chip, .product-profile-chip, .dive-site-tag, .route-profile-tag) {
  display: var(--public-chip-display);
  align-items: var(--public-chip-align);
  min-height: var(--public-chip-min-height);
  padding: var(--public-chip-padding);
  border: var(--public-chip-border);
  border-radius: var(--public-chip-radius);
  background: var(--public-chip-bg);
  color: var(--public-chip-color);
  font-size: var(--public-chip-font-size);
  font-weight: var(--public-chip-font-weight);
  line-height: var(--public-chip-line-height);
}

:where(.public-chip--soft, .product-profile-chip-soft) {
  border: var(--public-chip-soft-border);
  background: var(--public-chip-soft-bg);
  color: var(--public-chip-soft-color);
}

:where(.public-info-grid, .product-profile-meta-grid, .organization-public-meta-grid, .dive-site-fact-grid) {
  display: var(--public-info-grid-display);
  grid-template-columns: var(--public-info-grid-columns);
  gap: var(--public-info-grid-gap);
}

:where(.public-info-card, .product-profile-meta-item, .organization-public-meta-item, .dive-site-fact-card) {
  display: var(--public-info-card-display);
  flex-direction: var(--public-info-card-direction);
  gap: var(--public-info-card-gap);
  min-width: var(--public-info-card-min-width);
  padding: var(--public-info-card-padding);
  border: var(--public-info-card-border);
  border-radius: var(--public-info-card-radius);
  background: var(--public-info-card-bg);
}

:where(.public-info-card__label, .product-profile-meta-label, .organization-public-meta-item span, .dive-site-fact-card__label) {
  color: var(--public-info-label-color);
  font-size: var(--public-info-label-font-size);
  font-weight: var(--public-info-label-font-weight);
  line-height: var(--public-info-label-line-height);
  letter-spacing: var(--public-info-label-letter-spacing);
  text-transform: var(--public-info-label-text-transform);
}

:where(.public-info-card__value, .product-profile-meta-value, .organization-public-meta-item strong, .dive-site-fact-card__value) {
  color: var(--public-info-value-color);
  font-size: var(--public-info-value-font-size);
  line-height: var(--public-info-value-line-height);
  word-break: var(--public-info-value-word-break);
}

:where(.public-section-head, .product-profile-panel-head, .organization-public-panel__head, .route-profile-section__header) {
  display: var(--public-section-head-display);
  align-items: var(--public-section-head-align);
  justify-content: var(--public-section-head-justify);
  gap: var(--public-section-head-gap);
  flex-wrap: var(--public-section-head-wrap);
  margin: var(--public-section-head-margin);
}

:where(.public-section-head__title, .product-profile-panel-title, .organization-public-panel__head h2, .route-profile-section__header h2) {
  margin: var(--public-section-head-title-margin);
  color: var(--public-section-head-title-color);
  font-size: var(--public-section-head-title-font-size);
  font-weight: var(--public-section-head-title-font-weight);
  line-height: var(--public-section-head-title-line-height);
}

:where(.public-section-head__copy, .product-profile-panel-subtitle, .route-profile-section__header p) {
  margin: var(--public-section-head-copy-margin);
  max-width: var(--public-section-head-copy-max-width);
  color: var(--public-section-head-copy-color);
  font-size: var(--public-section-head-copy-font-size);
  line-height: var(--public-section-head-copy-line-height);
}

:where(
  .public-surface-card,
  .product-profile-placeholder,
  .product-profile-empty,
  .product-profile-panel,
  .product-profile-hero,
  .organization-public-placeholder,
  .organization-public-panel,
  .organization-public-hero,
  .dive-site-text-card,
  .dive-site-side-card,
  .dive-site-section
) {
  margin: var(--public-surface-card-margin);
  padding: var(--public-surface-card-padding);
  border: var(--public-surface-card-border);
  border-radius: var(--public-surface-card-radius);
  background: var(--public-surface-card-bg);
  box-shadow: var(--public-surface-card-shadow);
}

:where(.public-notice, .works-upload-notice) {
  margin: var(--public-notice-margin);
  padding: var(--public-notice-padding);
  border: var(--public-notice-border);
  border-color: var(--public-notice-border-color);
  border-radius: var(--public-notice-radius);
  background: var(--public-notice-bg);
  color: var(--public-notice-color);
  font-size: var(--public-notice-font-size);
}

:where(.public-notice--success, .works-upload-notice--success) {
  border-color: var(--public-notice-success-border);
  background: var(--public-notice-success-bg);
  color: var(--public-notice-success-color);
}

:where(.public-notice--error, .works-upload-notice--error) {
  border-color: var(--public-notice-error-border);
  background: var(--public-notice-error-bg);
  color: var(--public-notice-error-color);
}

:where(.public-notice--info, .works-upload-notice--info) {
  border-color: var(--public-notice-info-border);
  background: var(--public-notice-info-bg);
  color: var(--public-notice-info-color);
}

:where(.public-loading-state, .public-portfolio__loading, .works-upload__loading) {
  padding: var(--public-loading-padding);
  color: var(--public-loading-color);
  font-size: var(--public-loading-font-size);
  text-align: var(--public-loading-text-align);
}

:where(.public-message-panel, .public-portfolio--error, .works-upload--gated) {
  max-width: var(--public-panel-max-width);
  margin: var(--public-panel-margin);
  padding: var(--public-panel-padding);
  border: var(--public-panel-border);
  border-radius: var(--public-panel-radius);
  background: var(--public-panel-bg);
  text-align: var(--public-panel-text-align);
}

:where(.public-message-panel, .public-portfolio--error, .works-upload--gated) :where(h2, h3) {
  margin: var(--public-panel-title-margin);
  color: var(--public-panel-title-color);
}

:where(.public-message-panel, .public-portfolio--error, .works-upload--gated) p {
  margin: var(--public-panel-copy-margin);
  color: var(--public-panel-copy-color);
}

:where(.public-action-link, .works-upload__login-link) {
  display: var(--public-action-link-display);
  padding: var(--public-action-link-padding);
  border-radius: var(--public-action-link-radius);
  background: var(--public-action-link-bg);
  color: var(--public-action-link-color);
  font-weight: var(--public-action-link-font-weight);
  text-decoration: var(--public-action-link-text-decoration);
}

:where(.public-action-link, .works-upload__login-link):hover,
:where(.public-action-link, .works-upload__login-link):focus-visible {
  background: var(--public-action-link-bg-hover);
  color: var(--public-action-link-color);
  text-decoration: var(--public-action-link-text-decoration);
}

:where(.public-action-link, .works-upload__login-link):focus-visible {
  outline: 0;
  box-shadow: var(--public-action-link-focus-ring);
}

:where(.public-text-link, .works-upload__back) {
  display: var(--public-text-link-display);
  margin: var(--public-text-link-margin);
  border-radius: var(--public-text-link-radius);
  color: var(--public-text-link-color);
  font-size: var(--public-text-link-font-size);
  font-weight: var(--public-text-link-font-weight);
  text-decoration: var(--public-text-link-decoration);
}

:where(.public-text-link, .works-upload__back):hover,
:where(.public-text-link, .works-upload__back):focus-visible {
  color: var(--public-text-link-color-hover);
  text-decoration: var(--public-text-link-decoration-hover);
}

:where(.public-text-link, .works-upload__back):focus-visible {
  outline: var(--public-text-link-focus-outline);
  outline-offset: var(--public-text-link-focus-offset);
}

:where(.public-surface-panel, .works-upload-geo) {
  margin: var(--public-surface-panel-margin);
  padding: var(--public-surface-panel-padding);
  border: var(--public-surface-panel-border);
  border-radius: var(--public-surface-panel-radius);
  background: var(--public-surface-panel-bg);
}

:where(.public-surface-panel__header, .works-upload-geo__header) {
  display: var(--public-surface-panel-header-display);
  justify-content: var(--public-surface-panel-header-justify);
  align-items: var(--public-surface-panel-header-align);
  gap: var(--public-surface-panel-header-gap);
  margin: var(--public-surface-panel-header-margin);
}

:where(.public-surface-panel__title, .works-upload-geo__header h3) {
  margin: var(--public-surface-panel-title-margin);
  font-size: var(--public-surface-panel-title-font-size);
  font-weight: var(--public-surface-panel-title-font-weight);
}

:where(.public-surface-panel__copy, .works-upload-geo__header p) {
  margin: var(--public-surface-panel-copy-margin);
  color: var(--public-surface-panel-copy-color);
  font-size: var(--public-surface-panel-copy-font-size);
}

:where(.public-callout, .works-upload-geo__trip-banner) {
  margin: var(--public-callout-margin);
  padding: var(--public-callout-padding);
  border: var(--public-callout-border);
  border-radius: var(--public-callout-radius);
  background: var(--public-callout-bg);
  color: var(--public-callout-color);
  font-size: var(--public-callout-font-size);
}

:where(.public-callout__link, .works-upload-geo__trip-exit) {
  margin-left: var(--public-callout-link-margin-left);
  color: var(--public-callout-link-color);
  font-weight: var(--public-callout-link-font-weight);
  text-decoration: var(--public-callout-link-text-decoration);
}

:where(.public-callout__link, .works-upload-geo__trip-exit):hover,
:where(.public-callout__link, .works-upload-geo__trip-exit):focus-visible {
  text-decoration: var(--public-callout-link-hover-decoration);
}

:where(.public-inline-empty, .works-upload-geo__none, .public-portfolio-album__empty) {
  padding: var(--public-inline-empty-padding);
  border: var(--public-inline-empty-border);
  border-radius: var(--public-inline-empty-radius);
  background: var(--public-inline-empty-bg);
  color: var(--public-inline-empty-color);
  font-size: var(--public-inline-empty-font-size);
  text-align: var(--public-inline-empty-text-align);
}

:where(.public-empty-card, .works-upload-empty, .public-portfolio__empty) {
  padding: var(--public-empty-card-padding);
  border: var(--public-empty-card-border);
  border-radius: var(--public-empty-card-radius);
  background: var(--public-empty-card-bg);
  color: var(--public-empty-card-color);
  text-align: var(--public-empty-card-text-align);
}

:where(.public-empty-card__icon, .public-portfolio__empty-icon) {
  margin: var(--public-empty-card-icon-margin);
  font-size: var(--public-empty-card-icon-font-size);
}

:where(.public-empty-card__title, .public-empty-card h2, .works-upload-empty h2, .public-portfolio__empty h2) {
  margin: var(--public-empty-card-title-margin);
  color: var(--public-empty-card-title-color);
  font-size: var(--public-empty-card-title-font-size);
  font-weight: var(--public-empty-card-title-font-weight);
}

:where(.public-empty-card__copy, .public-empty-card p, .works-upload-empty p, .public-portfolio__empty p) {
  margin: var(--public-empty-card-copy-margin);
  color: var(--public-empty-card-copy-color);
  font-size: var(--public-empty-card-copy-font-size);
  line-height: var(--public-empty-card-copy-line-height);
}

:where(.public-option-panel, .works-upload-options) {
  margin: var(--public-option-panel-margin);
  padding: var(--public-option-panel-padding);
  border: var(--public-option-panel-border);
  border-radius: var(--public-option-panel-radius);
  background: var(--public-option-panel-bg);
}

:where(.public-checkbox-line, .works-upload-options__checkbox) {
  display: var(--public-checkbox-line-display);
  align-items: var(--public-checkbox-line-align);
  gap: var(--public-checkbox-line-gap);
  font-size: var(--public-checkbox-line-font-size);
  cursor: var(--public-checkbox-line-cursor);
}

:where(.public-content-panel, .works-upload-queue, .public-portfolio-album) {
  margin: var(--public-content-panel-margin);
  padding: var(--public-content-panel-padding);
  border: var(--public-content-panel-border);
  border-radius: var(--public-content-panel-radius);
  background: var(--public-content-panel-bg);
}

:where(.public-content-panel__header, .works-upload-queue__header, .public-portfolio-album__header) {
  display: var(--public-content-panel-header-display);
  justify-content: var(--public-content-panel-header-justify);
  align-items: var(--public-content-panel-header-align);
  gap: var(--public-content-panel-header-gap);
  flex-wrap: var(--public-content-panel-header-wrap);
  margin: var(--public-content-panel-header-margin);
}

:where(.public-content-panel__title, .works-upload-queue__header h3, .public-portfolio-album__header h2) {
  margin: var(--public-content-panel-title-margin);
  font-size: var(--public-content-panel-title-font-size);
  font-weight: var(--public-content-panel-title-font-weight);
}

:where(.public-content-panel__meta, .public-portfolio-album__count) {
  color: var(--public-content-panel-meta-color);
  font-size: var(--public-content-panel-meta-font-size);
}

:where(.public-content-panel__copy, .public-portfolio-album__desc) {
  margin: var(--public-content-panel-copy-margin);
  color: var(--public-content-panel-copy-color);
  font-size: var(--public-content-panel-copy-font-size);
  line-height: var(--public-content-panel-copy-line-height);
}

:where(.public-card-grid, .public-portfolio-album__grid) {
  display: var(--public-card-grid-display);
  grid-template-columns: var(--public-card-grid-columns);
  gap: var(--public-card-grid-gap);
  margin-top: var(--public-card-grid-margin-top);
}

:where(.public-showcase-card, .public-works-card, .route-profile-dive-card) {
  display: var(--public-showcase-card-display);
  flex-direction: var(--public-showcase-card-direction);
  min-width: var(--public-showcase-card-min-width);
  overflow: var(--public-showcase-card-overflow);
  border: var(--public-showcase-card-border);
  border-radius: var(--public-showcase-card-radius);
  background: var(--public-showcase-card-bg);
  box-shadow: var(--public-showcase-card-shadow);
}

:where(.public-showcase-card--featured, .public-works-card--featured) {
  border-color: var(--public-showcase-card-featured-border);
  box-shadow: var(--public-showcase-card-featured-shadow);
}

:where(.public-showcase-card__media, .public-works-card__media, .route-profile-dive-card__media) {
  position: var(--public-showcase-media-position);
  aspect-ratio: var(--public-showcase-media-aspect-ratio);
  min-height: var(--public-showcase-media-min-height);
  background: var(--public-showcase-media-bg);
}

:where(.public-showcase-card__media--placeholder, .public-works-card__media--placeholder, .route-profile-dive-card__media.is-empty) {
  display: var(--public-showcase-placeholder-display);
  align-items: var(--public-showcase-placeholder-align);
  justify-content: var(--public-showcase-placeholder-justify);
  color: var(--public-showcase-placeholder-color);
  font-size: var(--public-showcase-placeholder-font-size);
  font-weight: var(--public-showcase-placeholder-font-weight);
}

:where(.public-showcase-card__asset, .public-works-card__asset, .route-profile-dive-card__media img, .route-profile-dive-card__media video) {
  display: var(--public-showcase-asset-display);
  width: var(--public-showcase-asset-width);
  height: var(--public-showcase-asset-height);
  min-height: var(--public-showcase-asset-min-height);
  background: var(--public-showcase-asset-bg);
  object-fit: var(--public-showcase-asset-fit);
}

:where(.public-showcase-card__body, .public-works-card__body, .route-profile-dive-card__body) {
  display: var(--public-showcase-body-display);
  flex-direction: var(--public-showcase-body-direction);
  gap: var(--public-showcase-body-gap);
  padding: var(--public-showcase-body-padding);
}

:where(.public-showcase-card__head, .public-showcase-card__badges, .public-works-card__head, .public-works-card__badges, .route-profile-dive-card__head) {
  display: var(--public-showcase-row-display);
  align-items: var(--public-showcase-row-align);
  gap: var(--public-showcase-row-gap);
  flex-wrap: var(--public-showcase-row-wrap);
}

:where(.public-showcase-card__head, .public-works-card__head, .route-profile-dive-card__head) {
  justify-content: var(--public-showcase-head-justify);
}

:where(.public-showcase-card__logo, .public-works-card__logo) {
  width: var(--public-showcase-logo-size);
  height: var(--public-showcase-logo-size);
  border-radius: var(--public-showcase-logo-radius);
  object-fit: var(--public-showcase-logo-fit);
  box-shadow: var(--public-showcase-logo-shadow);
}

:where(.public-showcase-card__badge, .public-works-card__badge) {
  display: var(--public-showcase-badge-display);
  align-items: var(--public-showcase-badge-align);
  justify-content: var(--public-showcase-badge-justify);
  min-height: var(--public-showcase-badge-min-height);
  padding: var(--public-showcase-badge-padding);
  border-radius: var(--public-showcase-badge-radius);
  background: var(--public-showcase-badge-bg);
  color: var(--public-showcase-badge-color);
  font-size: var(--public-showcase-badge-font-size);
  font-weight: var(--public-showcase-badge-font-weight);
  letter-spacing: var(--public-showcase-badge-letter-spacing);
  text-transform: var(--public-showcase-badge-text-transform);
}

:where(.public-showcase-card__badge--soft, .public-works-card__badge--soft) {
  background: var(--public-showcase-badge-soft-bg);
  color: var(--public-showcase-badge-soft-color);
}

:where(.public-showcase-card__badge--rank, .public-works-card__badge--rank) {
  background: var(--public-showcase-badge-rank-bg);
  color: var(--public-showcase-badge-rank-color);
}

:where(.public-showcase-card__title, .public-works-card__title, .route-profile-dive-card__title) {
  margin: var(--public-showcase-title-margin);
  color: var(--public-showcase-title-color);
  font-size: var(--public-showcase-title-font-size);
  font-weight: var(--public-showcase-title-font-weight);
  line-height: var(--public-showcase-title-line-height);
}

:where(.public-showcase-card__subtitle, .public-works-card__subtitle, .route-profile-dive-card__subtitle) {
  margin: var(--public-showcase-subtitle-margin);
  color: var(--public-showcase-subtitle-color);
  font-size: var(--public-showcase-subtitle-font-size);
  line-height: var(--public-showcase-subtitle-line-height);
}

:where(.public-showcase-card__facts, .public-works-card__facts) {
  display: var(--public-showcase-facts-display);
  gap: var(--public-showcase-facts-gap);
  flex-wrap: var(--public-showcase-facts-wrap);
  color: var(--public-showcase-facts-color);
  font-size: var(--public-showcase-facts-font-size);
  line-height: var(--public-showcase-facts-line-height);
}

:where(.public-showcase-card__actions, .public-works-card__actions, .route-profile-dive-card__actions) {
  display: var(--public-showcase-actions-display);
  align-items: var(--public-showcase-actions-align);
  gap: var(--public-showcase-actions-gap);
  flex-wrap: var(--public-showcase-actions-wrap);
  justify-content: var(--public-showcase-actions-justify);
  margin-top: var(--public-showcase-actions-margin-top);
}

:where(.public-showcase-card__actions, .public-works-card__actions) :where(.trip-btn, .trip-btn-tertiary) {
  flex: var(--public-showcase-action-flex);
}

:where(.public-cta-panel, .public-works-traveler, .route-profile-contribution, .dive-site-contribution-card) {
  display: var(--public-cta-panel-display);
  flex-direction: var(--public-cta-panel-direction);
  grid-template-columns: var(--public-cta-panel-columns);
  align-items: var(--public-cta-panel-align);
  justify-content: var(--public-cta-panel-justify);
  gap: var(--public-cta-panel-gap);
  margin-top: var(--public-cta-panel-margin-top);
  padding: var(--public-cta-panel-padding);
  border: var(--public-cta-panel-border);
  border-radius: var(--public-cta-panel-radius);
  background: var(--public-cta-panel-bg);
}

:where(.public-cta-panel__copy, .public-works-traveler__copy, .route-profile-contribution__copy, .dive-site-contribution-card__copy) {
  display: var(--public-cta-copy-display);
  gap: var(--public-cta-copy-gap);
  min-width: var(--public-cta-copy-min-width);
  max-width: var(--public-cta-copy-max-width);
}

:where(.public-cta-panel__actions, .public-works-traveler__actions, .route-profile-contribution__actions, .dive-site-contribution-card__actions) {
  display: var(--public-cta-actions-display);
  align-items: var(--public-cta-actions-align);
  justify-content: var(--public-cta-actions-justify);
  flex-shrink: var(--public-cta-actions-flex-shrink);
  min-width: var(--public-cta-actions-min-width);
}

:where(.public-cta-panel__badge, .route-profile-contribution__badge, .dive-site-contribution-card__eyebrow) {
  display: var(--public-cta-badge-display);
  margin-bottom: var(--public-cta-badge-margin-bottom);
  padding: var(--public-cta-badge-padding);
  border-radius: var(--public-cta-badge-radius);
  background: var(--public-cta-badge-bg);
  color: var(--public-cta-badge-color);
  font-size: var(--public-cta-badge-font-size);
  font-weight: var(--public-cta-badge-font-weight);
  letter-spacing: var(--public-cta-badge-letter-spacing);
  text-transform: var(--public-cta-badge-text-transform);
}

:where(.public-feature-gallery, .product-profile-gallery, .organization-public-gallery) {
  display: var(--public-feature-gallery-display);
  grid-template-columns: var(--public-feature-gallery-columns);
  gap: var(--public-feature-gallery-gap);
  align-items: var(--public-feature-gallery-align);
}

:where(.public-feature-gallery__stage, .product-profile-gallery-stage, .organization-public-gallery__stage) {
  position: var(--public-feature-gallery-stage-position);
  display: var(--public-feature-gallery-stage-display);
  width: var(--public-feature-gallery-stage-width);
  appearance: var(--public-feature-gallery-stage-appearance);
  margin: var(--public-feature-gallery-stage-margin);
  padding: var(--public-feature-gallery-stage-padding);
  border: var(--public-feature-gallery-stage-border);
  border-radius: var(--public-feature-gallery-stage-radius);
  overflow: var(--public-feature-gallery-stage-overflow);
  background: var(--public-feature-gallery-stage-bg);
  box-shadow: var(--public-feature-gallery-stage-shadow);
  cursor: var(--public-feature-gallery-stage-cursor);
  text-align: var(--public-feature-gallery-stage-text-align);
  font: var(--public-feature-gallery-stage-font);
}

:where(.public-feature-gallery__stage img, .product-profile-gallery-stage img, .organization-public-gallery__stage img) {
  display: var(--public-feature-gallery-image-display);
  width: var(--public-feature-gallery-image-width);
  aspect-ratio: var(--public-feature-gallery-image-aspect-ratio);
  object-fit: var(--public-feature-gallery-image-fit);
  opacity: var(--public-feature-gallery-image-opacity);
}

:where(.public-feature-gallery__hint, .product-profile-gallery-stage-hint, .organization-public-gallery__stage span) {
  position: var(--public-feature-gallery-hint-position);
  left: var(--public-feature-gallery-hint-left);
  right: var(--public-feature-gallery-hint-right);
  bottom: var(--public-feature-gallery-hint-bottom);
  display: var(--public-feature-gallery-hint-display);
  align-items: var(--public-feature-gallery-hint-align);
  min-height: var(--public-feature-gallery-hint-min-height);
  padding: var(--public-feature-gallery-hint-padding);
  border-radius: var(--public-feature-gallery-hint-radius);
  background: var(--public-feature-gallery-hint-bg);
  color: var(--public-feature-gallery-hint-color);
  font-size: var(--public-feature-gallery-hint-font-size);
  font-weight: var(--public-feature-gallery-hint-font-weight);
}

:where(.public-feature-gallery__thumbs, .product-profile-gallery-thumbnails, .organization-public-gallery__thumbs) {
  display: var(--public-feature-gallery-thumbs-display);
  grid-template-columns: var(--public-feature-gallery-thumbs-columns);
  gap: var(--public-feature-gallery-thumbs-gap);
  max-height: var(--public-feature-gallery-thumbs-max-height);
  overflow-y: var(--public-feature-gallery-thumbs-overflow-y);
}

:where(.public-feature-gallery__thumb, .product-profile-gallery-thumb, .organization-public-gallery__thumb) {
  appearance: var(--public-feature-gallery-thumb-appearance);
  padding: var(--public-feature-gallery-thumb-padding);
  overflow: var(--public-feature-gallery-thumb-overflow);
  border: var(--public-feature-gallery-thumb-border);
  border-radius: var(--public-feature-gallery-thumb-radius);
  background: var(--public-feature-gallery-thumb-bg);
  cursor: var(--public-feature-gallery-thumb-cursor);
  transition: var(--public-feature-gallery-thumb-transition);
}

:where(.public-feature-gallery__thumb:hover, .public-feature-gallery__thumb.is-active, .product-profile-gallery-thumb:hover, .product-profile-gallery-thumb.is-active, .organization-public-gallery__thumb.is-active) {
  border-color: var(--public-feature-gallery-thumb-active-border);
  box-shadow: var(--public-feature-gallery-thumb-active-shadow);
  transform: var(--public-feature-gallery-thumb-active-transform);
}

:where(.public-feature-gallery__thumb img, .product-profile-gallery-thumb img, .organization-public-gallery__thumb img) {
  display: var(--public-feature-gallery-thumb-image-display);
  width: var(--public-feature-gallery-thumb-image-width);
  aspect-ratio: var(--public-feature-gallery-thumb-image-aspect-ratio);
  object-fit: var(--public-feature-gallery-thumb-image-fit);
}

:where(.public-overlay-media-card, .trip-intro-media-tile) {
  position: var(--public-overlay-media-card-position);
  min-height: var(--public-overlay-media-card-min-height);
  overflow: var(--public-overlay-media-card-overflow);
  border-radius: var(--public-overlay-media-card-radius);
  background: var(--public-overlay-media-card-bg);
}

:where(.public-overlay-media-card img, .public-overlay-media-card video, .trip-intro-media-tile img, .trip-intro-media-tile video) {
  display: var(--public-overlay-media-asset-display);
  width: var(--public-overlay-media-asset-width);
  height: var(--public-overlay-media-asset-height);
  min-height: var(--public-overlay-media-asset-min-height);
  object-fit: var(--public-overlay-media-asset-fit);
}

:where(.public-overlay-media-card__caption, .trip-intro-media-tile__caption) {
  position: var(--public-overlay-media-caption-position);
  left: var(--public-overlay-media-caption-left);
  right: var(--public-overlay-media-caption-right);
  bottom: var(--public-overlay-media-caption-bottom);
  display: var(--public-overlay-media-caption-display);
  gap: var(--public-overlay-media-caption-gap);
  padding: var(--public-overlay-media-caption-padding);
  border-radius: var(--public-overlay-media-caption-radius);
  background: var(--public-overlay-media-caption-bg);
  color: var(--public-overlay-media-caption-color);
  backdrop-filter: var(--public-overlay-media-caption-filter);
}

:where(.public-overlay-media-card__meta, .trip-intro-media-tile__caption span) {
  color: var(--public-overlay-media-meta-color);
  font-size: var(--public-overlay-media-meta-font-size);
  font-weight: var(--public-overlay-media-meta-font-weight);
  text-transform: var(--public-overlay-media-meta-text-transform);
}

:where(.public-overlay-media-tags, .trip-intro-media-tags) {
  display: var(--public-overlay-media-tags-display);
  flex-wrap: var(--public-overlay-media-tags-wrap);
  gap: var(--public-overlay-media-tags-gap);
}

:where(.public-overlay-media-tag, .trip-intro-media-tags span) {
  width: var(--public-overlay-media-tag-width);
  padding: var(--public-overlay-media-tag-padding);
  border-radius: var(--public-overlay-media-tag-radius);
  background: var(--public-overlay-media-tag-bg);
  color: var(--public-overlay-media-tag-color);
  font-size: var(--public-overlay-media-tag-font-size);
  font-weight: var(--public-overlay-media-tag-font-weight);
  line-height: var(--public-overlay-media-tag-line-height);
  text-transform: var(--public-overlay-media-tag-text-transform);
}

:where(.public-overlay-media-card__title, .trip-intro-media-tile__caption strong) {
  font-size: var(--public-overlay-media-title-font-size);
}

:where(.public-gallery-card, .public-portfolio-item, .dive-site-media-card) {
  margin: var(--public-gallery-card-margin);
  overflow: var(--public-gallery-card-overflow);
  border: var(--public-gallery-card-border);
  border-radius: var(--public-gallery-card-radius);
  background: var(--public-gallery-card-bg);
  transition: var(--public-gallery-card-transition);
}

:where(.public-gallery-card, .public-portfolio-item):hover {
  border-color: var(--public-gallery-card-hover-border);
  box-shadow: var(--public-gallery-card-hover-shadow);
}

:where(.public-gallery-card__media, .public-portfolio-item__media, .dive-site-media-card__frame) {
  position: var(--public-gallery-media-position);
  display: var(--public-gallery-media-display);
  width: var(--public-gallery-media-width);
  overflow: var(--public-gallery-media-overflow);
  aspect-ratio: var(--public-gallery-media-aspect-ratio);
  min-height: var(--public-gallery-media-min-height);
  padding: var(--public-gallery-media-padding);
  border: var(--public-gallery-media-border);
  background: var(--public-gallery-media-bg);
  cursor: var(--public-gallery-media-cursor);
}

:where(.public-gallery-card__media img, .public-portfolio-item__media img, .dive-site-media-card__image, .dive-site-media-card__video) {
  display: var(--public-gallery-media-img-display);
  width: var(--public-gallery-media-img-width);
  height: var(--public-gallery-media-img-height);
  object-fit: var(--public-gallery-media-img-fit);
}

:where(.public-gallery-card__placeholder, .public-portfolio-item__placeholder) {
  display: var(--public-gallery-placeholder-display);
  align-items: var(--public-gallery-placeholder-align);
  justify-content: var(--public-gallery-placeholder-justify);
  width: var(--public-gallery-placeholder-width);
  height: var(--public-gallery-placeholder-height);
  color: var(--public-gallery-placeholder-color);
  font-size: var(--public-gallery-placeholder-font-size);
}

:where(.public-gallery-card__badge, .public-portfolio-item__badge) {
  position: var(--public-gallery-badge-position);
  right: var(--public-gallery-badge-right);
  bottom: var(--public-gallery-badge-bottom);
  padding: var(--public-gallery-badge-padding);
  border-radius: var(--public-gallery-badge-radius);
  background: var(--public-gallery-badge-bg);
  color: var(--public-gallery-badge-color);
  font-size: var(--public-gallery-badge-font-size);
}

:where(.public-gallery-card__caption, .public-gallery-card figcaption, .public-portfolio-item figcaption) {
  display: var(--public-gallery-caption-display);
  flex-direction: var(--public-gallery-caption-direction);
  gap: var(--public-gallery-caption-gap);
  padding: var(--public-gallery-caption-padding);
}

:where(.public-gallery-card__title, .public-gallery-card figcaption strong, .public-portfolio-item figcaption strong) {
  overflow: var(--public-gallery-caption-title-overflow);
  color: var(--public-gallery-caption-title-color);
  font-size: var(--public-gallery-caption-title-font-size);
  font-weight: var(--public-gallery-caption-title-font-weight);
  text-overflow: var(--public-gallery-caption-title-text-overflow);
  white-space: var(--public-gallery-caption-title-white-space);
}

:where(.public-gallery-card__subtitle, .public-gallery-card figcaption small, .public-portfolio-item figcaption small) {
  color: var(--public-gallery-caption-subtitle-color);
  font-size: var(--public-gallery-caption-subtitle-font-size);
}

:where(.public-lightbox, .public-portfolio-lightbox, .trip-media-lightbox, .product-profile-lightbox, .organization-public-lightbox, .trip-detail-room-gallery-modal) {
  position: var(--public-lightbox-position);
  inset: var(--public-lightbox-inset);
  z-index: var(--public-lightbox-z-index);
  display: var(--public-lightbox-display);
  align-items: var(--public-lightbox-align-items);
  justify-content: var(--public-lightbox-justify-content);
  justify-items: var(--public-lightbox-justify-items);
  padding: var(--public-lightbox-padding);
  background: var(--public-lightbox-bg);
}

:where(.public-lightbox__backdrop, .public-portfolio-lightbox__backdrop, .trip-media-lightbox-backdrop, .product-profile-lightbox-backdrop, .organization-public-lightbox__backdrop) {
  position: var(--public-lightbox-backdrop-position);
  inset: var(--public-lightbox-backdrop-inset);
  padding: var(--public-lightbox-backdrop-padding);
  border: var(--public-lightbox-backdrop-border);
  background: var(--public-lightbox-backdrop-bg);
  cursor: var(--public-lightbox-backdrop-cursor);
  backdrop-filter: var(--public-lightbox-backdrop-filter);
}

:where(.public-lightbox__stage, .public-portfolio-lightbox__stage, .trip-media-lightbox-dialog, .product-profile-lightbox-dialog, .organization-public-lightbox__dialog, .trip-detail-room-gallery-dialog) {
  position: var(--public-lightbox-stage-position);
  z-index: var(--public-lightbox-stage-z-index);
  display: var(--public-lightbox-stage-display);
  width: var(--public-lightbox-stage-width);
  max-width: var(--public-lightbox-stage-max-width);
  max-height: var(--public-lightbox-stage-max-height);
  overflow: var(--public-lightbox-stage-overflow);
  padding: var(--public-lightbox-stage-padding);
  border-radius: var(--public-lightbox-stage-radius);
  background: var(--public-lightbox-stage-bg);
  box-shadow: var(--public-lightbox-stage-shadow);
}

:where(.public-lightbox__media, .public-portfolio-lightbox__stage img, .public-portfolio-lightbox__stage video, .trip-media-lightbox-image, .product-profile-lightbox-image, .organization-public-lightbox__dialog img, .trip-detail-room-gallery-image) {
  display: var(--public-lightbox-media-display);
  width: var(--public-lightbox-media-width);
  max-width: var(--public-lightbox-media-max-width);
  max-height: var(--public-lightbox-media-max-height);
  border-radius: var(--public-lightbox-media-radius);
  background: var(--public-lightbox-media-bg);
  box-shadow: var(--public-lightbox-media-shadow);
  object-fit: var(--public-lightbox-media-fit);
}

:where(.public-lightbox__close, .public-portfolio-lightbox__close, .trip-media-lightbox-close, .product-profile-lightbox-close, .organization-public-lightbox__close, .trip-detail-room-gallery-close) {
  position: var(--public-lightbox-close-position);
  top: var(--public-lightbox-close-top);
  right: var(--public-lightbox-close-right);
  z-index: var(--public-lightbox-close-z-index);
  display: var(--public-lightbox-close-display);
  align-items: var(--public-lightbox-close-align);
  justify-content: var(--public-lightbox-close-justify);
  width: var(--public-lightbox-close-size);
  height: var(--public-lightbox-close-size);
  border: var(--public-lightbox-close-border);
  border-radius: var(--public-lightbox-close-radius);
  background: var(--public-lightbox-close-bg);
  color: var(--public-lightbox-close-color);
  cursor: var(--public-lightbox-close-cursor);
  font-size: var(--public-lightbox-close-font-size);
  line-height: var(--public-lightbox-close-line-height);
  box-shadow: var(--public-lightbox-close-shadow);
}

:where(.public-action-bar, .works-upload-queue__actions-bar) {
  display: var(--public-action-bar-display);
  gap: var(--public-action-bar-gap);
}

:where(.public-action-button, .works-upload-queue__actions-bar button) {
  padding: var(--public-action-button-padding);
  border: var(--public-action-button-border);
  border-radius: var(--public-action-button-radius);
  background: var(--public-action-button-bg);
  color: var(--public-action-button-color);
  cursor: var(--public-action-button-cursor);
  font-size: var(--public-action-button-font-size);
  font-weight: var(--public-action-button-font-weight);
  transition: var(--public-action-button-transition);
}

:where(.public-action-button--primary, .works-upload-queue__actions-bar button.is-primary) {
  border-color: var(--public-action-button-primary-border);
  background: var(--public-action-button-primary-bg);
  color: var(--public-action-button-primary-color);
}

:where(.public-action-button--primary, .works-upload-queue__actions-bar button.is-primary):hover:not(:disabled) {
  background: var(--public-action-button-primary-hover-bg);
}

:where(.public-action-button, .works-upload-queue__actions-bar button):disabled {
  opacity: var(--public-action-button-disabled-opacity);
  cursor: var(--public-action-button-disabled-cursor);
}

:where(.public-action-button--secondary, .works-upload-queue__actions-bar button.is-secondary):hover:not(:disabled) {
  background: var(--public-action-button-secondary-hover-bg);
}

:where(.public-list-stack, .works-upload-queue__list) {
  display: var(--public-list-stack-display);
  flex-direction: var(--public-list-stack-direction);
  gap: var(--public-list-stack-gap);
}

:where(.public-media-row, .works-upload-queue__item) {
  display: var(--public-media-row-display);
  grid-template-columns: var(--public-media-row-columns);
  align-items: var(--public-media-row-align);
  gap: var(--public-media-row-gap);
  padding: var(--public-media-row-padding);
  border: var(--public-media-row-border);
  border-radius: var(--public-media-row-radius);
}

:where(.public-media-row--success, .public-media-row.is-done, .works-upload-queue__item.is-done) {
  border-color: var(--public-media-row-success-border);
  background: var(--public-media-row-success-bg);
}

:where(.public-media-row--error, .public-media-row.is-error, .works-upload-queue__item.is-error) {
  border-color: var(--public-media-row-error-border);
  background: var(--public-media-row-error-bg);
}

:where(.public-media-row--active, .public-media-row.is-uploading, .works-upload-queue__item.is-uploading) {
  border-color: var(--public-media-row-active-border);
  background: var(--public-media-row-active-bg);
}

:where(.public-media-thumb, .works-upload-queue__thumb) {
  display: var(--public-media-thumb-display);
  align-items: var(--public-media-thumb-align);
  justify-content: var(--public-media-thumb-justify);
  width: var(--public-media-thumb-size);
  height: var(--public-media-thumb-size);
  overflow: var(--public-media-thumb-overflow);
  border-radius: var(--public-media-thumb-radius);
  background: var(--public-media-thumb-bg);
}

:where(.public-media-thumb img, .works-upload-queue__thumb img) {
  width: 100%;
  height: 100%;
  object-fit: var(--public-media-thumb-img-fit);
}

:where(.public-media-thumb__placeholder, .works-upload-queue__thumb-placeholder) {
  color: var(--public-media-thumb-placeholder-color);
  font-size: var(--public-media-thumb-placeholder-font-size);
}

:where(.public-media-meta, .works-upload-queue__meta) {
  display: var(--public-media-meta-display);
  flex-direction: var(--public-media-meta-direction);
  gap: var(--public-media-meta-gap);
  min-width: var(--public-media-meta-min-width);
}

:where(.public-media-meta__title, .works-upload-queue__meta strong) {
  overflow: var(--public-media-meta-title-overflow);
  font-size: var(--public-media-meta-title-font-size);
  font-weight: var(--public-media-meta-title-font-weight);
  text-overflow: var(--public-media-meta-title-text-overflow);
  white-space: var(--public-media-meta-title-white-space);
}

:where(.public-media-meta__subtitle, .works-upload-queue__meta small) {
  color: var(--public-media-meta-subtitle-color);
  font-size: var(--public-media-meta-subtitle-font-size);
}

:where(.public-progress-bar, .works-upload-queue__progress) {
  height: var(--public-progress-height);
  margin-top: var(--public-progress-margin-top);
  overflow: var(--public-progress-overflow);
  border-radius: var(--public-progress-radius);
  background: var(--public-progress-bg);
}

:where(.public-progress-bar > div, .works-upload-queue__progress > div) {
  height: 100%;
  background: var(--public-progress-fill-bg);
  transition: var(--public-progress-fill-transition);
}

:where(.public-status-text, .works-upload-queue__status) {
  min-width: var(--public-status-text-min-width);
  color: var(--public-status-text-color);
  font-size: var(--public-status-text-font-size);
  font-weight: var(--public-status-text-font-weight);
  text-align: var(--public-status-text-align);
}

:where(.public-media-row--success .public-status-text, .public-media-row.is-done .public-status-text, .works-upload-queue__item.is-done .works-upload-queue__status) {
  color: var(--public-status-text-success-color);
}

:where(.public-media-row--error .public-status-text, .public-media-row.is-error .public-status-text, .works-upload-queue__item.is-error .works-upload-queue__status) {
  color: var(--public-status-text-error-color);
}

:where(.public-icon-actions, .works-upload-queue__actions) {
  display: var(--public-icon-actions-display);
  gap: var(--public-icon-actions-gap);
}

:where(.public-icon-action, .works-upload-queue__actions button) {
  width: var(--public-icon-action-size);
  height: var(--public-icon-action-size);
  border: var(--public-icon-action-border);
  border-radius: var(--public-icon-action-radius);
  background: var(--public-icon-action-bg);
  color: var(--public-icon-action-color);
  cursor: var(--public-icon-action-cursor);
  font-size: var(--public-icon-action-font-size);
}

:where(.public-icon-action, .works-upload-queue__actions button):hover {
  background: var(--public-icon-action-hover-bg);
  color: var(--public-icon-action-hover-color);
}

:where(.public-segmented-control, .works-upload-geo__mode-switch) {
  display: var(--public-segmented-display);
  gap: var(--public-segmented-gap);
  flex-wrap: var(--public-segmented-wrap);
  margin: var(--public-segmented-margin);
}

:where(.public-segmented-control, .works-upload-geo__mode-switch) :where(button, .public-segmented-control__option) {
  padding: var(--public-segmented-option-padding);
  border: var(--public-segmented-option-border);
  border-radius: var(--public-segmented-option-radius);
  background: var(--public-segmented-option-bg);
  color: var(--public-segmented-option-color);
  font-size: var(--public-segmented-option-font-size);
  cursor: var(--public-segmented-option-cursor);
  transition: var(--public-segmented-option-transition);
}

:where(.public-segmented-control, .works-upload-geo__mode-switch) :where(button, .public-segmented-control__option):not(.is-active):hover {
  background: var(--public-segmented-option-hover-bg);
}

:where(.public-segmented-control, .works-upload-geo__mode-switch) :where(button, .public-segmented-control__option).is-active {
  border-color: var(--public-segmented-option-active-border);
  background: var(--public-segmented-option-active-bg);
  color: var(--public-segmented-option-active-color);
}

.trip-year-section {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.trip-year-title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--trip-primary-strong);
}

.trip-month-section {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.trip-month-body {
  display: none;
  padding: 14px 0 0;
}

.trip-month-body.is-expanded {
  display: block;
}

.trip-card-cover {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  border-radius: 18px;
  background: var(--public-card-cover-bg);
}

.trip-card-cover-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}

.trip-card-cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 16px;
  color: var(--trip-text-soft);
  background: var(--public-card-cover-placeholder-bg);
  text-align: center;
}

.trip-card-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.trip-card-meta,
.trip-card-summary,
.trip-card-summary-row,
.trip-card-summary-item {
  font-size: 14px;
  line-height: 1.7;
  color: var(--trip-text-soft);
}

.trip-card-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.trip-card-summary-item strong {
  color: var(--trip-primary-strong);
}

.trip-card-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
}
}

@layer public.responsive {
/* Shared responsive guardrails; page-specific responsive rules live in page files. */
@media (max-width: 960px) {
  .trip-card-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) {
  .trip-catalog-page {
    padding: 20px 14px 36px;
  }

  .trip-page-title {
    font-size: 40px;
  }

  .trip-year-title {
    font-size: 24px;
  }

  .trip-card-actions {
    flex-direction: column;
  }

  .trip-btn {
    width: 100%;
  }
}

@media (max-width: 768px) {
  :root {
    --public-lightbox-stage-max-height: calc(100dvh - 24px);
    --public-lightbox-media-max-height: calc(100dvh - 24px);
  }

  :where(html, body) {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .public-app-root {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    overscroll-behavior-x: none;
  }

  :where(.public-page-shell, .public-portfolio:not(.public-portfolio--error), .works-upload:not(.works-upload--gated)) {
    padding: var(--public-shell-padding-mobile);
  }

  .public-app-root > * {
    min-width: 0;
    max-width: 100%;
  }

  :where(.public-app-root, .public-app-root *) {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  :where(.public-app-root img, .public-app-root video, .public-app-root canvas, .public-app-root svg, .public-app-root iframe) {
    max-width: 100%;
  }

  :where(.public-page-hero, .public-portfolio__hero, .works-upload__hero) {
    flex-direction: var(--public-hero-flex-direction-mobile);
    gap: var(--public-hero-gap-mobile);
    padding: var(--public-hero-padding-mobile);
  }

  :where(.public-hero-title, .public-portfolio__id h1, .works-upload__hero h1) {
    font-size: var(--public-hero-title-font-size-mobile);
  }

  :where(input, select, textarea, button, .trip-btn, .public-action-button, .public-text-link) {
    max-width: 100%;
  }

  :where(button, .trip-btn, .public-action-button, .public-text-link) {
    min-width: 0;
    white-space: normal;
  }

  :where(textarea) {
    min-width: 0;
  }

  :where(
    [class$="-form-grid"],
    [class*="-form-grid "],
    [class$="__form-grid"],
    [class*="__form-grid "],
    [class$="-filter-grid"],
    [class*="-filter-grid "],
    [class$="__filter-grid"],
    [class*="__filter-grid "]
  ) {
    min-width: 0;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  :where(
    [class$="-filters"],
    [class*="-filters "],
    [class$="__filters"],
    [class*="__filters "],
    [class$="-toolbar"],
    [class*="-toolbar "],
    [class$="__toolbar"],
    [class*="__toolbar "],
    [class$="-actions"],
    [class*="-actions "],
    [class$="__actions"],
    [class*="__actions "],
    .public-action-bar
  ) {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }

  :where(
    [class$="-table-wrap"],
    [class*="-table-wrap "],
    [class$="__table-wrap"],
    [class*="__table-wrap "],
    [class$="-table-wrapper"],
    [class*="-table-wrapper "],
    [class$="__table-wrapper"],
    [class*="__table-wrapper "]
  ) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  :where(
    .share-box,
    .public-lightbox__stage,
    .public-portfolio-lightbox__stage,
    .trip-media-lightbox-dialog,
    .product-profile-lightbox-dialog,
    .organization-public-lightbox__dialog,
    .trip-detail-room-gallery-dialog,
    [class$="-dialog"],
    [class*="-dialog "],
    [class$="-drawer"],
    [class*="-drawer "],
    [class$="__modal"],
    [class*="__modal "],
    [class$="__dialog"],
    [class*="__dialog "],
    [class$="__drawer"],
    [class*="__drawer "]
  ) {
    max-width: min(100%, calc(100vw - 20px));
    max-height: min(100%, calc(100dvh - 20px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  :where(
    [class$="-drawer"],
    [class*="-drawer "],
    [class$="__drawer"],
    [class*="__drawer "]
  ) {
    height: 100dvh;
    max-height: 100dvh;
  }

  :where(
    .public-lightbox,
    .public-portfolio-lightbox,
    .trip-media-lightbox,
    .product-profile-lightbox,
    .organization-public-lightbox,
    .trip-detail-room-gallery-modal,
    [class$="-modal"],
    [class*="-modal "],
    [class$="-overlay"],
    [class*="-overlay "],
    [class$="__overlay"],
    [class*="__overlay "],
    [class$="-backdrop"],
    [class*="-backdrop "],
    [class$="__backdrop"],
    [class*="__backdrop "]
  ) {
    max-width: 100vw;
    max-height: 100dvh;
  }

  :where(
    [style*="position:fixed"][style*="inset:0"],
    [style*="position:fixed"][style*="inset: 0"],
    [style*="position: fixed"][style*="inset:0"],
    [style*="position: fixed"][style*="inset: 0"]
  ) {
    max-width: 100vw;
    max-height: 100dvh;
    padding: 12px;
  }

  :where(
    [style*="position:fixed"][style*="inset:0"] > *,
    [style*="position:fixed"][style*="inset: 0"] > *,
    [style*="position: fixed"][style*="inset:0"] > *,
    [style*="position: fixed"][style*="inset: 0"] > *
  ) {
    max-width: min(100%, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}
}

@layer public.utilities {
/* Native control normalizers. */
/*
 * 公共站点日期输入框占位统一为「yyyy/mm/dd」。详细原理见
 * web/admin/styles/base.css 同名块。两套独立的 CSS bundle 各贴一份。
 */
input[type="date"]:not(:focus):invalid::-webkit-datetime-edit {
  color: transparent;
}

input[type="date"]:not(:focus):invalid {
  position: relative;
}

input[type="date"]:not(:focus):invalid::before {
  content: "yyyy/mm/dd";
  color: var(--public-date-placeholder-text);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

input[type="date"]:focus::before,
input[type="date"]:valid::before {
  content: none;
}

/* Accessibility helpers. */
.public-u-sr-only,
.public-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Layout primitives. */
.public-u-flow > * + * {
  margin-top: var(--public-flow-space, 1rem);
}

.public-u-cluster {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--public-cluster-gap, 8px);
}

.public-u-stack {
  display: grid;
  gap: var(--public-stack-gap, 12px);
}

/* Overflow helpers. */
.public-u-scroll-x {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.public-u-scroll-x--hidden-scrollbar {
  scrollbar-width: none;
}

.public-u-scroll-x--hidden-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Text truncation helpers. */
.public-u-truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-u-line-clamp {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--public-line-clamp, 2);
}
}