/*!
 * ZBUI 设计系统 — vendored library (tokens + reset + dark overrides)
 * Source of truth: Claude Design project "ZBUI 设计系统" (the zbui.min.css block).
 *
 * Notes:
 * - Flattened on purpose (no @layer). The host RiPro/Bootstrap CSS is unlayered, and
 *   unlayered rules beat layered ones regardless of specificity — keeping ZBUI unlayered
 *   lets these .zbui-scoped rules reliably win inside our own markup.
 * - Everything is scoped under a `.zbui` wrapper. The reset only touches descendants of
 *   an element carrying `.zbui`, so host regions (e.g. native comments) are never affected.
 * - `--zb-*` derives from the host theme's `--ri-*` tokens; every `--ri-*` reference carries
 *   a literal fallback so the system also renders correctly when RiPro is absent. We never
 *   redeclare `--ri-*` on :root, so the host theme's own palette is left untouched.
 */

/* ============================================================
 * Reset (scoped to .zbui)
 * ========================================================== */
.zbui, .zbui *, .zbui :before, .zbui :after { box-sizing: border-box; }
.zbui {
  isolation: isolate;
  letter-spacing: 0;
  text-transform: none;
  min-width: 0;
  text-shadow: none;
  font-family: var(--zb-font-sans);
}
.zbui *, .zbui :before, .zbui :after { min-width: 0; text-shadow: none; }
.zbui :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, label) { margin: 0; padding: 0; }
.zbui :where(ul, ol) { list-style: none; }
.zbui :where(a) { color: inherit; text-decoration: none; }
.zbui :where(button, input, textarea, select) {
  font: inherit;
  line-height: inherit;
  letter-spacing: 0;
  color: inherit;
  text-transform: none;
  text-indent: 0;
  box-shadow: none;
}
.zbui :where(button, [type=button], [type=submit], [type=reset]) {
  appearance: none;
  cursor: pointer;
  background: 0 0;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.zbui :where(input, textarea, select) {
  appearance: none;
  background: 0 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  min-height: 0;
  margin: 0;
}
.zbui :where(input[type=search])::-webkit-search-decoration { -webkit-appearance: none; }
.zbui :where(input[type=search])::-webkit-search-cancel-button { -webkit-appearance: none; }
.zbui :where(input[type=search])::-webkit-search-results-button { -webkit-appearance: none; }
.zbui :where(input[type=search])::-webkit-search-results-decoration { -webkit-appearance: none; }
.zbui :where(img) { max-width: 100%; height: auto; display: block; }
.zbui :where(svg) { stroke: currentColor; flex-shrink: 0; display: block; }
.zbui :where(.btn, .form-control, .form-select, .input-group, .input-group-text, .card) {
  font: inherit;
  color: inherit;
  box-shadow: none;
  background: 0 0;
  border: 0;
  border-radius: 0;
}

/* ============================================================
 * Tokens — light
 * ========================================================== */
.zbui {
  /* surfaces */
  --zb-surface: #fff;
  --zb-surface-sunken: #f6f7f9;
  --zb-surface-card: #fff;
  --zb-surface-raised: #fff;
  --zb-surface-frosted: #fffffff5;
  --zb-field: #fff;
  --zb-field-sunken: #f0f1f3;
  --zb-muted: #f0f1f3;
  /* borders */
  --zb-border: #00000014;
  --zb-border-sunken: #00000014;
  --zb-field-border: #0000001f;
  --zb-chip-border: #00000014;
  /* text */
  --zb-text: #191a1f;
  --zb-text-soft: #595d69;
  --zb-text-muted: #868a94;
  --zb-text-subtle: #a1a1a8;
  /* brand (from --ri-*, literal fallbacks) */
  --zb-primary: var(--ri-primary, #2163e8);
  --zb-primary-hover: var(--ri-primary-hover, #1c54c5);
  --zb-on-solid: #fff;
  --zb-on-primary: var(--zb-on-solid);
  --zb-accent: var(--ri-primary, #2163e8);
  --zb-accent-rgb: var(--ri-primary-rgb, 33, 99, 232);
  --zb-primary-soft: rgba(var(--zb-accent-rgb), .1);
  --zb-primary-soft-border: rgba(var(--zb-accent-rgb), .18);
  --zb-primary-soft-border-strong: rgba(var(--zb-accent-rgb), .35);
  --zb-primary-soft-border-faint: rgba(var(--zb-accent-rgb), .1);
  --zb-primary-soft-text: var(--ri-primary-text, #1a4fba);
  --zb-ring-soft: 0 0 0 3px rgba(var(--ri-primary-rgb, 33, 99, 232), .06);
  --zb-focus-ring: var(--ri-primary-focus-ring, 0 0 0 3px rgba(33, 99, 232, .16));
  --zb-link: var(--ri-primary-text, #1a4fba);
  --zb-avatar-bg: rgba(var(--zb-accent-rgb), .1);
  --zb-avatar-ring: #00000014;
  /* elevation */
  --zb-shadow-card: 0 2px 16px #595d690d;
  --zb-shadow-card-hover: 0 8px 24px #595d691a;
  --zb-shadow-action: 0 4px 12px rgba(var(--ri-primary-rgb, 33, 99, 232), .25);
  --zb-shadow-raise: 0 6px 16px #595d6926;
  --zb-shadow-overlay: 0 16px 40px -12px #0f172a2e;
  --zb-shadow-overlay-up: 0 -18px 44px -20px #0f172a2e;
  --zb-field-shadow: 0 0 #0000;
  --zb-overlay: #0f172a73;
  --zb-inset-highlight: 0 0 #0000;
  --zb-inset-highlight-faint: 0 0 #0000;
  /* status (from --ri-*, literal fallbacks) */
  --zb-success: var(--ri-success, #0cbc87);
  --zb-success-rgb: var(--ri-success-rgb, 12, 188, 135);
  --zb-success-soft: var(--ri-success-bg-subtle, #cef2e7);
  --zb-success-soft-border: var(--ri-success-border-subtle, #9ee4cf);
  --zb-success-soft-text: var(--ri-success-text, #0a966c);
  --zb-on-success: var(--zb-on-solid);
  --zb-warning: var(--ri-warning, #f7c32e);
  --zb-warning-rgb: var(--ri-warning-rgb, 247, 195, 46);
  --zb-warning-soft: var(--ri-warning-bg-subtle, #fdf3d5);
  --zb-warning-soft-border: var(--ri-warning-border-subtle, #fce7ab);
  --zb-warning-soft-text: var(--ri-warning-text, #94751c);
  --zb-info: var(--ri-info, #4f9ef8);
  --zb-info-rgb: var(--ri-info-rgb, 79, 158, 248);
  --zb-info-soft: var(--ri-info-bg-subtle, #dcecfe);
  --zb-info-soft-border: var(--ri-info-border-subtle, #b9d8fc);
  --zb-info-soft-text: var(--ri-info-text, #2f5f95);
  --zb-danger: var(--ri-danger, #d6293e);
  --zb-danger-hover: var(--ri-danger-text, #ab2132);
  --zb-danger-soft: var(--ri-danger-bg-subtle, #f7d4d8);
  --zb-danger-soft-border: var(--ri-danger-border-subtle, #efa9b2);
  --zb-danger-soft-text: var(--ri-danger-text, #ab2132);
  --zb-danger-on-solid: var(--zb-on-solid);
  /* typography */
  --zb-font-sans: Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  --zb-text-xs: 12px;
  --zb-text-sm: 13px;
  --zb-text-base: 14px;
  --zb-text-md: 15px;
  --zb-text-lg: 16px;
  --zb-text-xl: 18px;
  --zb-text-2xl: 20px;
  --zb-weight-medium: 500;
  --zb-weight-semibold: 600;
  --zb-weight-bold: 700;
  --zb-leading-tight: 1.3;
  --zb-leading-snug: 1.4;
  --zb-leading-normal: 1.5;
  /* radius */
  --zb-radius-xs: 6px;
  --zb-radius-sm: 8px;
  --zb-radius-md: 10px;
  --zb-radius-lg: 12px;
  --zb-radius-xl: 16px;
  --zb-radius-2xl: 20px;
  --zb-radius-pill: 999px;
  --zb-radius-circle: 50%;
  /* sizing */
  --zb-control-h: 44px;
  --zb-control-h-sm: 36px;
  --zb-control-h-xs: 28px;
  --zb-icon-sm: 12px;
  --zb-icon-md: 14px;
  --zb-icon-lg: 16px;
  /* spacing (4px grid) */
  --zb-space-2xs: 4px;
  --zb-space-xs: 8px;
  --zb-space-sm: 12px;
  --zb-space-md: 16px;
  --zb-space-lg: 20px;
  --zb-space-xl: 24px;
  --zb-space-2xl: 32px;
  /* motion */
  --zb-duration-fast: .15s;
  --zb-duration-base: .2s;
  --zb-duration-slow: .32s;
  --zb-ease: cubic-bezier(.4, 0, .2, 1);
  --zb-ease-out: cubic-bezier(.2, .8, .2, 1);
  --zb-ease-in: cubic-bezier(.4, 0, 1, 1);
  --zb-ease-spring: cubic-bezier(.175, .885, .32, 1.15);
  /* z-index */
  --zb-z-raised: 10;
  --zb-z-dropdown: 1000;
  --zb-z-sticky: 1020;
  --zb-z-backdrop: 1040;
  --zb-z-modal: 1050;
  --zb-z-popover: 1060;
  --zb-z-toast: 1080;
  --zb-z-notice: 10001;
}

/* ============================================================
 * Tokens — dark ([data-bs-theme="dark"] carried on <html> by the host)
 * ========================================================== */
[data-bs-theme="dark"] .zbui {
  --zb-surface: #212327;
  --zb-surface-sunken: #1b1d21;
  --zb-surface-card: #1b1d21;
  --zb-surface-raised: #2c2e34;
  --zb-surface-frosted: #191b1df0;
  --zb-field: #191b1d;
  --zb-field-sunken: #212327;
  --zb-muted: #2a2c31;
  --zb-border: #2e3035;
  --zb-border-sunken: #2c2e33;
  --zb-field-border: #33353b;
  --zb-chip-border: #3a3c42;
  --zb-text: #f5f6f7;
  --zb-text-soft: #c7c9cf;
  --zb-text-muted: #9498a0;
  --zb-text-subtle: #868a92;
  --zb-primary-hover: #3b78f0;
  --zb-accent: #5b8cff;
  --zb-accent-rgb: 91, 140, 255;
  --zb-primary-soft: rgba(var(--zb-accent-rgb), .16);
  --zb-primary-soft-border: rgba(var(--zb-accent-rgb), .3);
  --zb-primary-soft-border-strong: rgba(var(--zb-accent-rgb), .4);
  --zb-primary-soft-border-faint: rgba(var(--zb-accent-rgb), .14);
  --zb-primary-soft-text: #9bb8ff;
  --zb-ring-soft: 0 0 0 3px rgba(var(--ri-primary-rgb, 33, 99, 232), .12);
  --zb-focus-ring: var(--ri-primary-focus-ring, 0 0 0 3px rgba(91, 140, 255, .22));
  --zb-link: #8fb0ff;
  --zb-avatar-bg: #2a2c31;
  --zb-avatar-ring: #ffffff14;
  --zb-shadow-card: 0 2px 16px #00000040;
  --zb-shadow-card-hover: 0 8px 24px #00000059;
  --zb-shadow-action: 0 4px 14px #0006;
  --zb-field-shadow: inset 0 1px 2px #0003;
  --zb-overlay: #0009;
  --zb-shadow-overlay: 0 16px 40px -12px #00000080;
  --zb-shadow-overlay-up: 0 -18px 44px -20px #00000080;
  --zb-shadow-raise: 0 6px 16px #0000004d;
  --zb-inset-highlight: inset 0 1px 0 #ffffff12;
  --zb-inset-highlight-faint: inset 0 1px 0 #ffffff08;
}