/* Shared by every H5 page and the Vue admin. See DESIGN_SYSTEM.md. */
:root{
  --radius-card:12px;
  --radius-media:var(--radius-card);
  --radius-overlay:var(--radius-card);
  --radius-control:8px;
  --radius-pill:999px;
  --radius-circle:50%;
  --radius-device:42px;
  --radius-device-small:30px;
}
.ui-card,.ui-surface{border-radius:var(--radius-card)}
.ui-media{border-radius:var(--radius-media)}
.ui-control{border-radius:var(--radius-control)}
.ui-pill{border-radius:var(--radius-pill)}
.ui-circle{border-radius:var(--radius-circle);aspect-ratio:1}

:root{
  --font-family-body:Arial,'PingFang SC','PingFang TC','Microsoft JhengHei',sans-serif;
  --font-family-serif:Georgia,'Songti TC',serif;
  --font-size-caption:12px;
  --font-size-body:14px;
  --font-size-body-lg:16px;
  --font-size-subtitle:18px;
  --font-size-title:20px;
  --font-size-title-lg:24px;
  --font-size-section:28px;
  --font-size-page:32px;
  --font-size-stat:36px;
  --font-size-display:48px;
  --font-size-display-max:80px;
  --font-size-hero-action:clamp(var(--font-size-caption),3.6cqw,var(--font-size-title-lg));
  --font-size-responsive-stat:clamp(var(--font-size-display),12vw,var(--font-size-display-max));
  --font-weight-light:300;
  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;
  --font-weight-display:800;
  --line-height-heading:1.25;
  --line-height-compact:1.4;
  --line-height-body:1.6;
  --line-height-relaxed:1.8;
  --line-height-display:1.1;
  --color-brand:#53858c;
  --color-brand-strong:#165f65;
  --color-text:#202b2d;
  --color-text-secondary:#617477;
  --color-text-muted:#7c8e91;
  --color-text-inverse:#ffffff;
  --color-surface:#ffffff;
  --color-surface-subtle:#f4f7f6;
  --color-canvas:#eef2f1;
  --color-selected:#eaf2f1;
  --color-border:#dbe4e3;
  --color-gold:#d9a52f;
  --color-danger:#cf5656;
  --color-success:#4e8767;
  --color-dark:#111b1c;
  --space-half:2px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-28:112px;
  --control-height-sm:32px;
  --control-height:40px;
  --control-height-lg:48px;
  --layout-header-height:66px;
  --layout-dock-clearance:116px;
  --layout-review-offset:100px;
  --layout-review-offset-wide:125px;
}
.ui-text{font-family:var(--font-family-body);font-size:var(--font-size-body);line-height:var(--line-height-body);color:var(--color-text)}
.ui-caption{font-size:var(--font-size-caption);color:var(--color-text-muted)}
.ui-stack{display:flex;flex-direction:column;gap:var(--space-4)}

/* Mobile text controls stay at 16px to avoid focus zoom in mobile browsers. */
@media(max-width:767px),(pointer:coarse){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  textarea,select,[contenteditable="true"],
  .ant-input,.ant-input-number-input,.ant-select-selection-search-input,
  .ant-select-selection-item,.ant-select-selection-placeholder{
    font-size:var(--font-size-body-lg)!important;
  }
}

/* Shared elevation levels for H5 and administration. */
:root{
 --shadow-card:0 6px 20px color-mix(in srgb,var(--color-text) 12%,transparent),0 2px 6px color-mix(in srgb,var(--color-text) 5%,transparent);
 --shadow-floating:0 10px 30px color-mix(in srgb,var(--color-text) 20%,transparent),0 3px 8px color-mix(in srgb,var(--color-text) 8%,transparent);
 --shadow-overlay:0 20px 60px color-mix(in srgb,var(--color-text) 30%,transparent);
 --shadow-dock:0 -6px 24px color-mix(in srgb,var(--color-text) 14%,transparent);
 --shadow-glass:inset 0 1px 0 color-mix(in srgb,var(--color-surface) 35%,transparent),var(--shadow-floating);
 --shadow-focus:0 0 0 2px color-mix(in srgb,var(--color-brand) 20%,transparent);
 --shadow-surface-ring:0 0 0 2px var(--color-surface-subtle);
 --shadow-divider:0 1px 0 var(--color-border);
 --shadow-pagination:0 1px 4px color-mix(in srgb,var(--color-text) 30%,transparent);
 --shadow-backdrop:0 0 0 100vmax color-mix(in srgb,var(--color-text) 20%,transparent);
 --shadow-selection:inset 0 0 0 2px color-mix(in srgb,var(--color-brand) 53.33%,transparent);
 --shadow-active-edge:inset 3px 0 var(--color-brand);
}

:root{--color-progress-track:#c8d3d2}

/* Shared carousel indicator contrast; independent of page backgrounds. */
:root{--color-indicator-inactive:var(--color-progress-track);--color-indicator-active:var(--color-text)}

/* Loading surfaces share the site's neutral palette. */
:root{--color-skeleton-base:color-mix(in srgb,var(--color-surface-subtle) 72%,var(--color-border));--color-skeleton-detail:var(--color-border);--color-media-fallback:var(--color-canvas)}