/* ============================================================
   ICFK Design System v2.0
   产品型界面 · 浅蓝主色 · 自托管 · 无构建依赖
   ============================================================ */

:root {
  color-scheme: light;
  --ui-primary: #2f6bff;
  --ui-primary-hover: #1f5aef;
  --ui-primary-strong: #1848cc;
  --ui-primary-soft: #eaf1ff;
  --ui-primary-softer: #f4f8ff;
  --ui-primary-2: #6d5efc;            /* 品牌渐变辅助色（靛紫）*/
  --ui-accent: #14b8a6;               /* 点缀色（青绿）*/
  --ui-bg: #f3f6fb;
  --ui-bg-elevated: #eaeff8;
  --ui-surface: #ffffff;
  --ui-surface-muted: #f6f8fc;
  --ui-surface-pressed: #eef2f8;
  --ui-border: #e6ecf4;
  --ui-border-strong: #d3dce8;
  --ui-text: #0f1a2e;
  --ui-text-secondary: #4a586e;
  --ui-text-muted: #8a97ab;
  --ui-success: #12855a;
  --ui-success-soft: #e6f7ef;
  --ui-warning: #b26a00;
  --ui-warning-soft: #fff3df;
  --ui-danger: #d5333f;
  --ui-danger-soft: #fdeff0;
  --ui-info: #2f6bff;
  --ui-info-soft: #eaf1ff;
  --ui-ring: rgb(47 107 255 / .18);
  --ui-gradient: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2));
  --ui-radius-xs: 6px;
  --ui-radius-sm: 8px;
  --ui-radius: 12px;
  --ui-radius-lg: 16px;
  --ui-radius-xl: 20px;
  --ui-shadow-xs: 0 1px 2px rgb(20 33 61 / .05);
  --ui-shadow-sm: 0 2px 4px rgb(20 33 61 / .04), 0 6px 16px -6px rgb(20 33 61 / .10);
  --ui-shadow: 0 4px 10px -4px rgb(20 33 61 / .10), 0 14px 40px -12px rgb(20 33 61 / .16);
  --ui-shadow-lg: 0 12px 24px -12px rgb(20 33 61 / .16), 0 30px 70px -20px rgb(20 33 61 / .28);
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-7: 28px;
  --ui-space-8: 32px;
  --ui-space-10: 40px;
  --ui-space-12: 48px;
  --ui-font: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ui-transition: 180ms cubic-bezier(.2,.7,.2,1);
  --ui-header-height: 64px;
  --ui-content-width: 1240px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --ui-primary: #5b8bff;
  --ui-primary-hover: #6f9aff;
  --ui-primary-strong: #8fb0ff;
  --ui-bg: #0a0f1a;
  --ui-bg-elevated: #0f1626;
  --ui-surface: #131c2e;
  --ui-surface-muted: #172236;
  --ui-surface-pressed: #1e2b42;
  --ui-border: #263349;
  --ui-border-strong: #384964;
  --ui-text: #f2f6fc;
  --ui-text-secondary: #b9c4d6;
  --ui-text-muted: #7f8da4;
  --ui-primary-soft: #16294b;
  --ui-primary-softer: #101f39;
  --ui-ring: rgb(91 139 255 / .28);
  --ui-success-soft: #102d22;
  --ui-warning-soft: #34250f;
  --ui-danger-soft: #35191d;
  --ui-info-soft: #142642;
  --ui-shadow-xs: 0 1px 2px rgb(0 0 0 / .2);
  --ui-shadow-sm: 0 4px 14px rgb(0 0 0 / .2);
  --ui-shadow: 0 12px 34px rgb(0 0 0 / .28);
  --ui-shadow-lg: 0 24px 68px rgb(0 0 0 / .42);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--ui-font); background: var(--ui-bg); color: var(--ui-text); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--ui-bg); color: var(--ui-text); font-family: var(--ui-font); line-height: 1.5; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img, svg { max-width: 100%; }
[v-cloak] { display: none !important; }
::selection { background: #cce6ff; color: #10223d; }

.ui-app { min-height: 100vh; }
.ui-container { width: min(calc(100% - 48px), var(--ui-content-width)); margin-inline: auto; }
.ui-page { padding: 30px 0 56px; }
.ui-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.ui-page-title { margin: 0; font-size: clamp(23px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -.025em; font-weight: 750; }
.ui-page-subtitle { margin: 8px 0 0; color: var(--ui-text-secondary); font-size: 14px; max-width: 760px; }
.ui-section { margin-top: 24px; }
.ui-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.ui-section-title { margin: 0; font-size: 18px; line-height: 1.35; font-weight: 720; letter-spacing: -.012em; }
.ui-section-description { margin: 4px 0 0; color: var(--ui-text-muted); font-size: 13px; }

/* App navigation */
.ui-topbar { position: sticky; top: 0; z-index: 100; height: var(--ui-header-height); background: rgb(255 255 255 / .94); border-bottom: 1px solid var(--ui-border); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); }
[data-theme="dark"] .ui-topbar { background: rgb(21 31 45 / .92); }
.ui-topbar-inner { width: min(calc(100% - 40px), var(--ui-content-width)); height: 100%; margin-inline: auto; display: flex; align-items: center; gap: 24px; }
.ui-brand { display: inline-flex; align-items: center; gap: 10px; min-width: max-content; text-decoration: none; }
.ui-brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--ui-primary); color: #fff; box-shadow: 0 6px 16px rgb(10 132 255 / .22); }
.ui-brand-mark svg { width: 19px; height: 19px; }
.ui-brand-name { font-weight: 760; letter-spacing: -.02em; }
.ui-brand-name b { color: var(--ui-primary); }
.ui-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.ui-nav-link { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 12px; color: var(--ui-text-secondary); border-radius: 9px; text-decoration: none; font-size: 13px; font-weight: 620; transition: color var(--ui-transition), background var(--ui-transition); white-space: nowrap; }
.ui-nav-link:hover { color: var(--ui-text); background: var(--ui-surface-muted); }
.ui-nav-link.is-active { color: var(--ui-primary-strong); background: var(--ui-primary-soft); }
.ui-nav-link svg { width: 16px; height: 16px; }
.ui-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ui-account-chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 6px; border: 1px solid var(--ui-border); background: var(--ui-surface); border-radius: 11px; color: var(--ui-text); text-decoration: none; font-size: 13px; font-weight: 650; }
.ui-account-avatar { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--ui-primary-soft); color: var(--ui-primary-strong); font-weight: 760; }
.ui-mobile-menu-button { display: none !important; }

/* Grid */
.ui-grid { display: grid; gap: 16px; }
.ui-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.ui-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.ui-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.ui-stack { display: flex; flex-direction: column; gap: 16px; }
.ui-row { display: flex; align-items: center; gap: 12px; }
.ui-row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ui-wrap { flex-wrap: wrap; }
.ui-grow { flex: 1 1 auto; min-width: 0; }

/* Cards */
.ui-card { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-xs); }
.ui-card-body { padding: 20px; }
.ui-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 14px; border-bottom: 1px solid var(--ui-border); }
.ui-card-foot { padding: 14px 20px 18px; border-top: 1px solid var(--ui-border); }
.ui-card-title { margin: 0; font-size: 16px; font-weight: 720; line-height: 1.4; }
.ui-card-description { margin: 5px 0 0; color: var(--ui-text-secondary); font-size: 13px; line-height: 1.6; }
.ui-card.is-interactive { transition: transform var(--ui-transition), border-color var(--ui-transition), box-shadow var(--ui-transition); }
.ui-card.is-interactive:hover { transform: translateY(-1px); border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow-sm); }
.ui-card.is-selected { border-color: var(--ui-primary); box-shadow: 0 0 0 3px rgb(10 132 255 / .12); }
.ui-stat-card { padding: 18px; }
.ui-stat-label { color: var(--ui-text-muted); font-size: 12px; font-weight: 650; }
.ui-stat-value { margin-top: 8px; font-size: 26px; line-height: 1; font-weight: 760; letter-spacing: -.03em; }
.ui-stat-meta { margin-top: 8px; color: var(--ui-text-secondary); font-size: 12px; }

/* Buttons */
.ui-button { appearance: none; border: 1px solid transparent; min-height: 40px; padding: 0 14px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 680; line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--ui-transition), border-color var(--ui-transition), color var(--ui-transition), transform var(--ui-transition), box-shadow var(--ui-transition); }
.ui-button:hover:not(:disabled) { transform: translateY(-1px); }
.ui-button:active:not(:disabled) { transform: translateY(0); }
.ui-button:focus-visible, .ui-icon-button:focus-visible, .ui-tab:focus-visible, .ui-input:focus-visible, .ui-select:focus-visible, .ui-textarea:focus-visible { outline: 3px solid rgb(10 132 255 / .22); outline-offset: 2px; }
.ui-button:disabled { cursor: not-allowed; opacity: .52; transform: none; }
.ui-button svg { width: 16px; height: 16px; flex: 0 0 auto; }
.ui-button--primary { color: #fff; background: var(--ui-primary); box-shadow: 0 6px 16px rgb(10 132 255 / .18); }
.ui-button--primary:hover:not(:disabled) { background: var(--ui-primary-hover); box-shadow: 0 8px 20px rgb(10 132 255 / .23); }
.ui-button--secondary { color: var(--ui-text); background: var(--ui-surface); border-color: var(--ui-border-strong); }
.ui-button--secondary:hover:not(:disabled) { background: var(--ui-surface-muted); }
.ui-button--quiet { color: var(--ui-primary-strong); background: var(--ui-primary-soft); }
.ui-button--quiet:hover:not(:disabled) { background: #dceeff; }
.ui-button--danger { color: #fff; background: var(--ui-danger); }
.ui-button--danger-soft { color: var(--ui-danger); background: var(--ui-danger-soft); border-color: #f1c5c8; }
.ui-button--success { color: #fff; background: var(--ui-success); }
.ui-button--sm { min-height: 34px; padding: 0 11px; border-radius: 9px; font-size: 12px; }
.ui-button--lg { min-height: 48px; padding: 0 18px; border-radius: 12px; font-size: 14px; }
.ui-button--block { width: 100%; }
.ui-icon-button { appearance: none; width: 38px; height: 38px; border-radius: 10px; display: inline-grid; place-items: center; border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text-secondary); cursor: pointer; transition: all var(--ui-transition); }
.ui-icon-button:hover { color: var(--ui-text); background: var(--ui-surface-muted); border-color: var(--ui-border-strong); }
.ui-icon-button svg { width: 18px; height: 18px; }
.ui-spinner { width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ui-spin .75s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* Forms */
.ui-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ui-label { color: var(--ui-text-secondary); font-size: 12px; font-weight: 680; }
.ui-label-required::after { content: " *"; color: var(--ui-danger); }
.ui-input, .ui-select, .ui-textarea { width: 100%; border: 1px solid var(--ui-border-strong); background: var(--ui-surface); color: var(--ui-text); border-radius: 10px; transition: border-color var(--ui-transition), box-shadow var(--ui-transition), background var(--ui-transition); }
.ui-input, .ui-select { min-height: 42px; padding: 0 12px; }
.ui-textarea { min-height: 108px; padding: 11px 12px; resize: vertical; line-height: 1.55; }
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--ui-text-muted); }
.ui-input:hover, .ui-select:hover, .ui-textarea:hover { border-color: var(--ui-primary); }
.ui-input:focus, .ui-select:focus, .ui-textarea:focus { border-color: var(--ui-primary); box-shadow: 0 0 0 3px rgb(10 132 255 / .12); outline: none; }
.ui-input:disabled, .ui-select:disabled, .ui-textarea:disabled { background: var(--ui-surface-muted); color: var(--ui-text-muted); cursor: not-allowed; }
.ui-help { color: var(--ui-text-muted); font-size: 12px; line-height: 1.55; }
.ui-error { color: var(--ui-danger); font-size: 12px; }
.ui-checkbox, .ui-radio { display: inline-flex; align-items: flex-start; gap: 9px; color: var(--ui-text-secondary); font-size: 13px; cursor: pointer; }
.ui-checkbox input, .ui-radio input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--ui-primary); }
.ui-search { position: relative; }
.ui-search svg { position: absolute; left: 12px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--ui-text-muted); pointer-events: none; }
.ui-search .ui-input { padding-left: 38px; }
.ui-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }

/* Tabs */
.ui-tabs { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface-muted); overflow-x: auto; scrollbar-width: none; }
.ui-tabs::-webkit-scrollbar { display: none; }
.ui-tab { appearance: none; min-height: 38px; padding: 0 13px; border: 0; border-radius: 9px; background: transparent; color: var(--ui-text-secondary); font-size: 13px; font-weight: 650; cursor: pointer; white-space: nowrap; transition: all var(--ui-transition); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.ui-tab:hover { color: var(--ui-text); }
.ui-tab.is-active { background: var(--ui-surface); color: var(--ui-primary-strong); box-shadow: var(--ui-shadow-xs); }
.ui-tab svg { width: 16px; height: 16px; }

/* Badges and status */
.ui-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.ui-badge--neutral { color: var(--ui-text-secondary); background: var(--ui-surface-muted); border: 1px solid var(--ui-border); }
.ui-badge--primary { color: var(--ui-primary-strong); background: var(--ui-primary-soft); }
.ui-badge--success { color: var(--ui-success); background: var(--ui-success-soft); }
.ui-badge--warning { color: var(--ui-warning); background: var(--ui-warning-soft); }
.ui-badge--danger { color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Alert */
.ui-alert { display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; border-radius: 12px; border: 1px solid; font-size: 13px; line-height: 1.6; }
.ui-alert svg { width: 18px; height: 18px; margin-top: 1px; flex: 0 0 auto; }
.ui-alert--info { color: var(--ui-info); background: var(--ui-info-soft); border-color: #cddfff; }
.ui-alert--success { color: var(--ui-success); background: var(--ui-success-soft); border-color: #bfe7d2; }
.ui-alert--warning { color: var(--ui-warning); background: var(--ui-warning-soft); border-color: #f1d6a6; }
.ui-alert--danger { color: var(--ui-danger); background: var(--ui-danger-soft); border-color: #f1c5c8; }

/* Data table */
.ui-table-wrap { overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-surface); }
.ui-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ui-table th { padding: 11px 14px; text-align: left; color: var(--ui-text-muted); background: var(--ui-surface-muted); border-bottom: 1px solid var(--ui-border); font-size: 11px; font-weight: 720; letter-spacing: .02em; white-space: nowrap; }
.ui-table td { padding: 13px 14px; color: var(--ui-text-secondary); border-bottom: 1px solid var(--ui-border); vertical-align: middle; }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr:hover { background: var(--ui-primary-softer); }
.ui-table-main { color: var(--ui-text); font-weight: 680; }
.ui-table-sub { margin-top: 3px; color: var(--ui-text-muted); font-size: 12px; }
.ui-table-actions { display: flex; justify-content: flex-end; gap: 7px; }

/* Modal */
.ui-modal-layer { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; }
.ui-modal-backdrop { position: absolute; inset: 0; background: rgb(15 23 42 / .48); animation: ui-fade-in var(--ui-transition); }
.ui-modal { position: relative; width: min(100%, 560px); max-height: min(86vh, 820px); display: flex; flex-direction: column; overflow: hidden; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 18px; box-shadow: var(--ui-shadow-lg); animation: ui-modal-in var(--ui-transition); }
.ui-modal--wide { width: min(100%, 820px); }
.ui-modal-head { padding: 20px 22px 16px; display: flex; align-items: flex-start; gap: 14px; border-bottom: 1px solid var(--ui-border); }
.ui-modal-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--ui-primary-soft); color: var(--ui-primary); flex: 0 0 auto; }
.ui-modal-icon svg { width: 21px; height: 21px; }
.ui-modal-title { margin: 0; font-size: 17px; font-weight: 740; line-height: 1.35; }
.ui-modal-subtitle { margin: 4px 0 0; color: var(--ui-text-secondary); font-size: 13px; }
.ui-modal-close { margin-left: auto; }
.ui-modal-body { padding: 20px 22px; overflow: auto; }
.ui-modal-foot { padding: 14px 22px 20px; display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--ui-border); }
@keyframes ui-fade-in { from { opacity: 0; } }
@keyframes ui-modal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }

/* Toast */
.ui-toast-stack { position: fixed; top: 78px; right: 20px; z-index: 1200; width: min(390px, calc(100vw - 28px)); display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.ui-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; border: 1px solid var(--ui-border); border-radius: 13px; background: var(--ui-surface); box-shadow: var(--ui-shadow); color: var(--ui-text-secondary); font-size: 13px; animation: ui-toast-in var(--ui-transition); }
.ui-toast > svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.ui-toast--success > svg { color: var(--ui-success); }
.ui-toast--warning > svg { color: var(--ui-warning); }
.ui-toast--error > svg { color: var(--ui-danger); }
.ui-toast--info > svg { color: var(--ui-info); }
.ui-toast-message { flex: 1; min-width: 0; line-height: 1.55; }
.ui-toast-close { appearance: none; border: 0; background: transparent; color: var(--ui-text-muted); cursor: pointer; padding: 0; }
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(-6px); } }

/* Skeleton / empty */
.ui-skeleton { position: relative; overflow: hidden; background: var(--ui-surface-pressed); border-radius: 8px; }
.ui-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgb(255 255 255 / .56), transparent); animation: ui-shimmer 1.35s infinite; }
[data-theme="dark"] .ui-skeleton::after { background: linear-gradient(90deg, transparent, rgb(255 255 255 / .07), transparent); }
.ui-skeleton-line { height: 12px; }
.ui-skeleton-card { height: 138px; }
@keyframes ui-shimmer { to { transform: translateX(100%); } }
.ui-empty { min-height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px; color: var(--ui-text-secondary); }
.ui-empty-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--ui-primary-soft); color: var(--ui-primary); }
.ui-empty-icon svg { width: 24px; height: 24px; }
.ui-empty-title { margin: 14px 0 0; color: var(--ui-text); font-size: 16px; font-weight: 720; }
.ui-empty-text { max-width: 420px; margin: 6px 0 0; color: var(--ui-text-muted); font-size: 13px; line-height: 1.6; }
.ui-empty-action { margin-top: 16px; }

/* Stepper / option cards */
.ui-stepper { display: flex; align-items: center; gap: 8px; }
.ui-step { display: flex; align-items: center; gap: 8px; color: var(--ui-text-muted); font-size: 12px; font-weight: 650; }
.ui-step-index { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--ui-border-strong); background: var(--ui-surface); }
.ui-step.is-active { color: var(--ui-primary-strong); }
.ui-step.is-active .ui-step-index { color: #fff; border-color: var(--ui-primary); background: var(--ui-primary); }
.ui-step.is-done { color: var(--ui-success); }
.ui-step.is-done .ui-step-index { color: #fff; border-color: var(--ui-success); background: var(--ui-success); }
.ui-step-line { width: 34px; height: 1px; background: var(--ui-border); }
.ui-option-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.ui-option { appearance: none; width: 100%; min-height: 80px; padding: 14px; text-align: left; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface); color: var(--ui-text); cursor: pointer; transition: all var(--ui-transition); }
.ui-option:hover { border-color: var(--ui-primary); background: var(--ui-primary-softer); }
.ui-option.is-selected { border-color: var(--ui-primary); background: var(--ui-primary-soft); box-shadow: 0 0 0 3px rgb(10 132 255 / .10); }
.ui-option-title { font-size: 14px; font-weight: 700; }
.ui-option-meta { margin-top: 5px; color: var(--ui-text-secondary); font-size: 12px; line-height: 1.45; }
.ui-price { font-variant-numeric: tabular-nums; font-weight: 760; letter-spacing: -.02em; }
.ui-price-main { font-size: 28px; color: var(--ui-text); }
.ui-price-unit { margin-left: 4px; color: var(--ui-text-muted); font-size: 12px; font-weight: 600; }
.ui-summary-list { display: flex; flex-direction: column; }
.ui-summary-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ui-border); font-size: 13px; }
.ui-summary-row:last-child { border-bottom: 0; }
.ui-summary-label { color: var(--ui-text-muted); }
.ui-summary-value { color: var(--ui-text); text-align: right; font-weight: 650; }

/* Product */
.ui-product-card { display: flex; flex-direction: column; min-height: 100%; }
.ui-product-visual { position: relative; height: 126px; display: flex; align-items: flex-end; padding: 18px; overflow: hidden; border-bottom: 1px solid var(--ui-border); background: var(--ui-primary-softer); }
.ui-product-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ui-product-image + .ui-product-icon { position: relative; z-index: 1; background: rgb(255 255 255 / .92); }
.ui-product-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: var(--ui-primary); background: var(--ui-surface); border: 1px solid #d7e9fb; box-shadow: var(--ui-shadow-xs); }
.ui-product-icon svg { width: 25px; height: 25px; }
.ui-product-card .ui-card-body { flex: 1; }
.ui-feature-list { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ui-feature-list li { display: flex; align-items: flex-start; gap: 8px; color: var(--ui-text-secondary); font-size: 12px; line-height: 1.5; }
.ui-feature-list svg { width: 15px; height: 15px; margin-top: 2px; color: var(--ui-success); flex: 0 0 auto; }

/* Misc */
.ui-divider { height: 1px; background: var(--ui-border); border: 0; margin: 18px 0; }
.ui-muted { color: var(--ui-text-muted); }
.ui-secondary { color: var(--ui-text-secondary); }
.ui-primary-text { color: var(--ui-primary-strong); }
.ui-danger-text { color: var(--ui-danger); }
.ui-success-text { color: var(--ui-success); }
.ui-mono { font-family: var(--ui-font-mono); }
.ui-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-line-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ui-hidden { display: none !important; }
.ui-overlay-loading { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(255 255 255 / .72); backdrop-filter: blur(2px); }

/* Responsive */
@media (max-width: 960px) {
  .ui-nav { display: none; }
  .ui-mobile-menu-button { display: inline-grid !important; }
  .ui-grid-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ui-grid-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  :root { --ui-header-height: 58px; }
  .ui-container { width: min(calc(100% - 28px), var(--ui-content-width)); }
  .ui-topbar-inner { width: calc(100% - 24px); gap: 12px; }
  .ui-brand-name { font-size: 14px; }
  .ui-account-chip span:not(.ui-account-avatar) { display: none; }
  .ui-account-chip { padding-right: 6px; }
  .ui-page { padding: 20px 0 42px; }
  .ui-page-header { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 18px; }
  .ui-page-title { font-size: 23px; }
  .ui-grid-2, .ui-grid-3, .ui-grid-4, .ui-form-grid, .ui-option-grid { grid-template-columns: 1fr; }
  .ui-card-body { padding: 16px; }
  .ui-card-head { padding: 16px 16px 13px; }
  .ui-card-foot { padding: 13px 16px 16px; }
  .ui-stepper { align-items: flex-start; overflow-x: auto; padding-bottom: 4px; }
  .ui-step { min-width: max-content; }
  .ui-step-line { width: 22px; margin-top: 13px; }
  .ui-modal-layer { padding: 10px; align-items: end; }
  .ui-modal { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; }
  .ui-modal-head { padding: 18px 16px 14px; }
  .ui-modal-body { padding: 16px; }
  .ui-modal-foot { padding: 13px 16px 16px; flex-direction: column-reverse; }
  .ui-modal-foot .ui-button { width: 100%; min-height: 46px; }
  .ui-toast-stack { top: 68px; right: 14px; }
  .ui-button--lg { min-height: 48px; }
  .ui-table-wrap { border-radius: 12px; }
}
@media (max-width: 420px) {
  .ui-brand-name { display: none; }
  .ui-topbar-actions { gap: 5px; }
  .ui-button { min-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* ============================================================
   ICFK Design System v3.0 — Community Portal shell
   任务优先、低装饰密度、统一导航与可配置场景图
   ============================================================ */
:root {
  --ui-duration-fast: 120ms;
  --ui-duration-base: 190ms;
  --ui-duration-slow: 320ms;
  --ui-ease-standard: cubic-bezier(.2,.72,.2,1);
  --ui-ease-emphasized: cubic-bezier(.16,1,.3,1);
  --ui-focus-ring: 0 0 0 3px rgb(10 132 255 / .2);
  --ui-topbar-surface: rgb(255 255 255 / .96);
  --ui-overlay: rgb(15 23 42 / .58);
}
[data-theme="dark"] {
  --ui-topbar-surface: rgb(21 31 45 / .96);
  --ui-overlay: rgb(2 6 23 / .7);
}
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
.ui-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-topbar { background: var(--ui-topbar-surface); backdrop-filter: saturate(135%) blur(10px); -webkit-backdrop-filter: saturate(135%) blur(10px); }
.ui-topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--ui-border-strong), transparent); opacity: .58; pointer-events: none; }
.ui-topbar-inner { position: relative; }
.ui-brand-mark { overflow: hidden; }
.ui-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.ui-nav-link { position: relative; }
.ui-nav-link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 99px; background: var(--ui-primary); transform: scaleX(0); transform-origin: center; transition: transform var(--ui-duration-base) var(--ui-ease-standard); }
.ui-nav-link.is-active::after { transform: scaleX(1); }
.ui-topbar-actions > .ui-button { min-height: 36px; }
.ui-theme-icon--sun { display: none; }
[data-theme="dark"] .ui-theme-icon--moon { display: none; }
[data-theme="dark"] .ui-theme-icon--sun { display: block; }

/* Account menu */
.ui-account { position: relative; }
.ui-account-chip { appearance: none; cursor: pointer; transition: border-color var(--ui-transition), background var(--ui-transition), box-shadow var(--ui-transition); }
.ui-account-chip:hover, .ui-account.is-open .ui-account-chip { border-color: var(--ui-primary); background: var(--ui-primary-softer); box-shadow: var(--ui-shadow-xs); }
.ui-account-chevron { width: 14px; height: 14px; color: var(--ui-text-muted); transition: transform var(--ui-transition); }
.ui-account.is-open .ui-account-chevron { transform: rotate(180deg); }
.ui-account-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 180; width: 248px; padding: 8px; border: 1px solid var(--ui-border); border-radius: 14px; background: var(--ui-surface); box-shadow: var(--ui-shadow-lg); transform-origin: top right; animation: ui-popover-in var(--ui-duration-base) var(--ui-ease-emphasized); }
.ui-account-menu[hidden] { display: none; }
.ui-account-menu-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; }
.ui-account-menu-head .ui-account-avatar { width: 36px; height: 36px; }
.ui-account-menu-head div { display: flex; flex-direction: column; min-width: 0; }
.ui-account-menu-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ui-account-menu-head small { margin-top: 2px; color: var(--ui-text-muted); font-size: 11px; }
.ui-account-menu a, .ui-account-menu button { appearance: none; width: 100%; min-height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ui-text-secondary); text-decoration: none; text-align: left; font-size: 13px; cursor: pointer; transition: color var(--ui-transition), background var(--ui-transition); }
.ui-account-menu a:hover, .ui-account-menu button:hover { color: var(--ui-text); background: var(--ui-surface-muted); }
.ui-account-menu a svg, .ui-account-menu button svg { width: 16px; height: 16px; flex: 0 0 auto; }
.ui-account-separator { height: 1px; margin: 6px 8px; background: var(--ui-border); }
@keyframes ui-popover-in { from { opacity: 0; transform: translateY(-5px) scale(.985); } }

/* Mobile navigation: one panel plus one compact bottom bar, no duplicate drawer */
.ui-mobile-panel { position: fixed; z-index: 160; top: var(--ui-header-height); left: 0; right: 0; padding: 12px; border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); box-shadow: var(--ui-shadow); animation: ui-panel-in var(--ui-duration-base) var(--ui-ease-emphasized); }
.ui-mobile-panel[hidden] { display: none; }
.ui-mobile-panel-grid { width: min(100%, 720px); margin: 0 auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.ui-mobile-link { min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 10px; color: var(--ui-text-secondary); text-decoration: none; font-size: 11px; font-weight: 650; }
.ui-mobile-link:hover, .ui-mobile-link.is-active { color: var(--ui-primary-strong); background: var(--ui-primary-soft); }
.ui-mobile-link svg { width: 19px; height: 19px; }
.ui-bottom-nav { display: none; }
@keyframes ui-panel-in { from { opacity: 0; transform: translateY(-8px); } }

/* Footer */
.ui-footer { margin-top: auto; border-top: 1px solid var(--ui-border); background: var(--ui-surface); }
.ui-footer-inner { min-height: 70px; display: flex; align-items: center; gap: 14px; color: var(--ui-text-muted); font-size: 12px; }
.ui-footer a { color: var(--ui-text-secondary); text-decoration: none; }
.ui-footer a:hover { color: var(--ui-primary-strong); }
.ui-footer-links { margin-left: auto; display: flex; align-items: center; gap: 16px; }

/* 备案与资质：ICP / 公安联网备案，页脚每页可见 */
.ui-beian { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.ui-beian-item { display: inline-flex; align-items: center; gap: 5px; color: var(--ui-text-muted); text-decoration: none; white-space: nowrap; }
.ui-beian-item img { display: block; flex: none; }
a.ui-beian-item:hover { color: var(--ui-primary); text-decoration: underline; }

/* Configurable scene imagery. The image is atmospheric; content stays a real foreground layer. */
.ui-scene { position: relative; isolation: isolate; overflow: hidden; background: var(--ui-surface); }
.ui-scene::before { content: ""; position: absolute; z-index: -2; inset: calc(var(--scene-blur, 0px) * -2); background-image: var(--scene-image, none); background-size: cover; background-position: var(--scene-position, 50% 50%); background-repeat: no-repeat; filter: blur(var(--scene-blur, 0px)) brightness(var(--scene-brightness, 1)); transform: scale(var(--scene-scale, 1)); transition: transform var(--ui-duration-slow) var(--ui-ease-emphasized), filter var(--ui-duration-slow) var(--ui-ease-standard); }
.ui-scene::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(105deg, rgb(10 18 32 / calc(var(--scene-overlay, .62) + .14)), rgb(10 18 32 / var(--scene-overlay, .62))); pointer-events: none; }
.ui-scene--light::after { background: linear-gradient(105deg, rgb(245 248 252 / calc(var(--scene-overlay, .78) + .12)), rgb(245 248 252 / var(--scene-overlay, .78))); }
.ui-scene:hover::before { transform: scale(calc(var(--scene-scale, 1) + .008)); }
.ui-scene-content { position: relative; z-index: 1; }
.ui-app-background { position: relative; isolation: isolate; }
.ui-app-background::before { content: ""; position: fixed; z-index: -2; inset: calc(var(--scene-blur, 0px) * -2); background-image: var(--scene-image, none); background-size: cover; background-position: var(--scene-position, 50% 20%); filter: blur(var(--scene-blur, 18px)) brightness(var(--scene-brightness, .72)); transform: scale(var(--scene-scale, 1.08)); pointer-events: none; }
.ui-app-background::after { content: ""; position: fixed; z-index: -1; inset: 0; background: rgb(245 248 252 / var(--scene-overlay, .9)); pointer-events: none; }
[data-theme="dark"] .ui-app-background::after { background: rgb(13 20 32 / var(--scene-overlay, .9)); }

/* Natural motion: communicates continuity, never blocks input. */
.ui-page, [data-ui-page] { animation: ui-page-enter var(--ui-duration-slow) var(--ui-ease-emphasized) both; }
.ui-page > *, [data-ui-stagger] > * { animation: ui-content-enter var(--ui-duration-slow) var(--ui-ease-emphasized) both; }
.ui-page > *:nth-child(2), [data-ui-stagger] > *:nth-child(2) { animation-delay: 35ms; }
.ui-page > *:nth-child(3), [data-ui-stagger] > *:nth-child(3) { animation-delay: 65ms; }
.ui-page > *:nth-child(n+4), [data-ui-stagger] > *:nth-child(n+4) { animation-delay: 90ms; }
@keyframes ui-page-enter { from { opacity: .01; } }
@keyframes ui-content-enter { from { opacity: 0; transform: translateY(7px); } }
::view-transition-old(root) { animation: ui-view-old 140ms ease both; }
::view-transition-new(root) { animation: ui-view-new 260ms var(--ui-ease-emphasized) both; }
@keyframes ui-view-old { to { opacity: 0; } }
@keyframes ui-view-new { from { opacity: 0; transform: translateY(5px); } }

/* Explicit interaction states */
.ui-button[aria-busy="true"] { pointer-events: none; }
.ui-button[aria-busy="true"]::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ui-spin .7s linear infinite; }
.ui-button, .ui-icon-button, .ui-account-chip, .ui-mobile-link { touch-action: manipulation; }
.ui-button:active:not(:disabled), .ui-icon-button:active:not(:disabled), .ui-account-chip:active { transform: translateY(1px) scale(.985); }

@media (max-width: 960px) {
  .ui-account-name { display: none; }
  .ui-account-chip { padding-right: 7px; }
}
@media (max-width: 720px) {
  body { padding-bottom: 62px; }
  .ui-bottom-nav { position: fixed; z-index: 150; left: 0; right: 0; bottom: 0; height: 62px; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); border-top: 1px solid var(--ui-border); background: var(--ui-topbar-surface); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding-bottom: env(safe-area-inset-bottom); }
  .ui-bottom-nav-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--ui-text-muted); text-decoration: none; font-size: 10px; font-weight: 620; }
  .ui-bottom-nav-link svg { width: 18px; height: 18px; }
  .ui-bottom-nav-link.is-active { color: var(--ui-primary-strong); }
  .ui-auth-register { display: none; }
  .ui-account-menu { position: fixed; top: calc(var(--ui-header-height) + 8px); right: 12px; left: 12px; width: auto; }
  .ui-footer { margin-bottom: 0; }
  .ui-footer-inner { min-height: 88px; flex-direction: column; justify-content: center; text-align: center; gap: 7px; }
  .ui-footer-links { margin-left: 0; }
  .ui-beian { justify-content: center; }
  .ui-scene::before { background-image: var(--scene-image-mobile, var(--scene-image, none)); }
  .ui-app-background::before { background-image: var(--scene-image-mobile, var(--scene-image, none)); }
}
@media (max-width: 420px) {
  .ui-auth-login { min-width: 58px; }
  .ui-mobile-panel-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ui-page, .ui-page > *, [data-ui-page], [data-ui-stagger] > * { animation: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ============================================================
   ICFK Design System · v4.0 高级质感增强层（纯追加，不覆盖结构）
   目标：更克制的层次、更真实的光影、渐变主色、精致聚焦环。
   ============================================================ */

/* — 全局微调：更顺滑的字体渲染与更柔和的选区色 — */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
::selection { background: color-mix(in srgb, var(--ui-primary) 22%, transparent); color: var(--ui-text); }

/* — 主按钮：品牌渐变 + 顶部内高光 + 立体阴影 — */
.ui-button--primary {
  background: var(--ui-gradient);
  color: #fff;
  box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset, 0 6px 16px -6px color-mix(in srgb, var(--ui-primary) 60%, transparent);
}
.ui-button--primary:hover:not(:disabled) {
  filter: saturate(108%);
  box-shadow: 0 1px 0 rgb(255 255 255 / .22) inset, 0 10px 24px -8px color-mix(in srgb, var(--ui-primary) 66%, transparent);
}
.ui-button--primary:active:not(:disabled) { box-shadow: 0 2px 8px -4px color-mix(in srgb, var(--ui-primary) 55%, transparent); }
.ui-button--secondary { background: var(--ui-surface); border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow-xs); }
.ui-button--secondary:hover:not(:disabled) { border-color: color-mix(in srgb, var(--ui-primary) 40%, var(--ui-border-strong)); color: var(--ui-primary-strong); }

/* — 统一精致聚焦环（键盘可达性 + 高级感）— */
.ui-button:focus-visible, .ui-icon-button:focus-visible, .ui-input:focus-visible,
.ui-select:focus-visible, .ui-nav-link:focus-visible, .ui-account-chip:focus-visible,
a:focus-visible, button:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ui-ring), 0 0 0 1px color-mix(in srgb, var(--ui-primary) 55%, transparent);
}

/* — 输入框：更清爽的底色 + 聚焦渐染 — */
.ui-input, .ui-select, textarea.ui-input {
  background: var(--ui-surface-muted);
  border-color: var(--ui-border);
  transition: border-color var(--ui-transition), box-shadow var(--ui-transition), background var(--ui-transition);
}
.ui-input:focus, .ui-select:focus, textarea.ui-input:focus {
  background: var(--ui-surface);
  border-color: var(--ui-primary);
}

/* — 卡片：更细腻的边界与悬浮升起 — */
.ui-card { box-shadow: var(--ui-shadow-xs); transition: transform var(--ui-transition), box-shadow var(--ui-transition), border-color var(--ui-transition); }
.ui-card.is-interactive:hover { transform: translateY(-2px); box-shadow: var(--ui-shadow-sm); border-color: color-mix(in srgb, var(--ui-primary) 24%, var(--ui-border)); }
.ui-stat-card { position: relative; overflow: hidden; }
.ui-stat-card::before { content:""; position:absolute; inset:0 auto auto 0; width:3px; height:100%; background: var(--ui-gradient); opacity:.0; transition: opacity var(--ui-transition); }
.ui-stat-card:hover::before { opacity:.9; }

/* — 顶栏：更通透的玻璃与更细的分隔 — */
.ui-topbar { background: color-mix(in srgb, var(--ui-surface) 82%, transparent); border-bottom-color: color-mix(in srgb, var(--ui-border) 80%, transparent); }
.ui-brand-mark { background: var(--ui-gradient); box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--ui-primary) 55%, transparent); }
.ui-nav-link.is-active { background: color-mix(in srgb, var(--ui-primary) 12%, transparent); color: var(--ui-primary-strong); }

/* — 徽章：柔和底色 — */
.ui-badge--primary { background: var(--ui-primary-soft); color: var(--ui-primary-strong); }

/* ---- 新增高级工具类（可在任意页面复用）---- */
/* 渐变文字标题 */
.ui-gradient-text { background: var(--ui-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* 小标签（Hero 眉标）*/
.ui-eyebrow { display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.02em; color: var(--ui-primary-strong);
  background: var(--ui-primary-soft); border:1px solid color-mix(in srgb, var(--ui-primary) 20%, transparent); }
.ui-eyebrow::before { content:""; width:6px; height:6px; border-radius:50%; background: var(--ui-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 22%, transparent); }
/* 通用 Hero 面板（渐变 + 光斑）*/
.ui-hero { position:relative; overflow:hidden; border-radius: var(--ui-radius-xl);
  padding: clamp(24px, 4vw, 44px); color:#fff; background: var(--ui-gradient); box-shadow: var(--ui-shadow); isolation:isolate; }
.ui-hero::before { content:""; position:absolute; z-index:-1; top:-30%; right:-10%; width:52%; height:160%;
  background: radial-gradient(closest-side, rgb(255 255 255 / .22), transparent 70%); }
.ui-hero::after { content:""; position:absolute; z-index:-1; inset:0;
  background: radial-gradient(120% 100% at 0% 100%, rgb(0 0 0 / .18), transparent 60%); }
.ui-hero h1, .ui-hero .ui-page-title { color:#fff; }
/* 分隔渐变细线 */
.ui-hr-glow { height:1px; border:0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ui-primary) 40%, transparent), transparent); }
/* 玻璃卡片 */
.ui-glass { background: color-mix(in srgb, var(--ui-surface) 70%, transparent); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border:1px solid color-mix(in srgb, var(--ui-border) 70%, transparent); }

/* ============================================================
   iOS 灵动层 · v4.1 — 弹簧动效 / 按压回弹 / 毛玻璃材质 / 错落入场
   目标：让界面"活"起来，像 iOS 一样有物理弹性与触摸反馈。
   ============================================================ */
:root {
  --ui-spring: cubic-bezier(.34, 1.56, .64, 1);       /* 回弹（带过冲）*/
  --ui-spring-soft: cubic-bezier(.22, 1.18, .36, 1);  /* 轻回弹 */
  --ui-decel: cubic-bezier(.16, 1, .3, 1);            /* 平滑减速（iOS 进场）*/
}

/* — 通用按压反馈：可点元素按下微缩、松手弹回（iOS 招牌手感）— */
.ui-button, .ui-icon-button, .ui-tab, .ui-nav-link, .ui-option, .ui-badge,
.ui-card.is-interactive, .ui-account-chip, .ui-mobile-link, .ui-bottom-nav-link {
  -webkit-tap-highlight-color: transparent;
}
.ui-button, .ui-icon-button, .ui-tab, .ui-nav-link, .ui-option, .ui-account-chip {
  transition: transform .34s var(--ui-spring), background var(--ui-transition),
              border-color var(--ui-transition), box-shadow .34s var(--ui-decel),
              color var(--ui-transition), filter var(--ui-transition);
}
.ui-button:active, .ui-icon-button:active, .ui-tab:active, .ui-nav-link:active,
.ui-option:active, .ui-account-chip:active, .ui-mobile-link:active, .ui-bottom-nav-link:active {
  transform: scale(.93);
  transition: transform .1s ease-out;   /* 按下要干脆，回弹才有对比 */
}

/* — 主/次按钮：hover 轻浮起，press 有弹性 — */
.ui-button--primary:hover:not(:disabled),
.ui-button--secondary:hover:not(:disabled) { transform: translateY(-1.5px); }
.ui-button:active:not(:disabled) { transform: scale(.95) translateY(0); }
.ui-icon-button:hover { transform: translateY(-1px); }

/* — 卡片：弹性上浮，按下轻回落 — */
.ui-card.is-interactive:hover { transform: translateY(-4px) scale(1.007); }
.ui-card.is-interactive:active { transform: translateY(-1px) scale(.997); transition: transform .12s ease-out; }

/* — 毛玻璃材质（iOS Materials）：顶栏、弹层、模态背景 — */
.ui-topbar {
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background: color-mix(in srgb, var(--ui-surface) 68%, transparent);
}
.ui-modal-backdrop { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.ui-modal { border-radius: 22px; }

/* — 更柔和、更大的圆角（squircle 观感）— */
.ui-button, .ui-input, .ui-select, .ui-textarea, .ui-icon-button { border-radius: 12px; }
.ui-card { border-radius: 16px; }

/* — 弹性进场：模态 / 弹层 / 提示 — */
@keyframes ui-modal-in { from { opacity: 0; transform: translateY(18px) scale(.955); } to { opacity: 1; transform: none; } }
.ui-modal { animation: ui-modal-in .44s var(--ui-spring-soft); }
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }
.ui-toast { animation: ui-toast-in .48s var(--ui-spring); border-radius: 15px; }

/* — 徽章 pop 弹入 — */
@keyframes ui-badge-pop { 0% { transform: scale(0); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
.ui-badge { animation: ui-badge-pop .42s var(--ui-spring) both; }

/* — 统计卡错落淡入上浮（稳定容器，无 Vue 列表抖动风险）— */
@keyframes ui-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.ui-stats-grid > .ui-stat-card, .ui-grid > .ui-stat-card { animation: ui-rise .55s var(--ui-decel) both; }
.ui-stats-grid > .ui-stat-card:nth-child(2), .ui-grid > .ui-stat-card:nth-child(2) { animation-delay: .05s; }
.ui-stats-grid > .ui-stat-card:nth-child(3), .ui-grid > .ui-stat-card:nth-child(3) { animation-delay: .1s; }
.ui-stats-grid > .ui-stat-card:nth-child(4), .ui-grid > .ui-stat-card:nth-child(4) { animation-delay: .15s; }

/* — 输入聚焦：轻微放大光晕（有呼吸感）— */
.ui-input:focus, .ui-select:focus, .ui-textarea:focus { transform: translateZ(0); }

@media (prefers-reduced-motion: reduce) {
  .ui-modal, .ui-toast, .ui-badge, .ui-stat-card { animation: none !important; }
  .ui-button, .ui-icon-button, .ui-card, .ui-nav-link, .ui-tab, .ui-option { transition: background var(--ui-transition), color var(--ui-transition), border-color var(--ui-transition) !important; }
  *:active { transform: none !important; }
}

/* ============================================================
   细节打磨层 · v4.2 —— "顺手"体验的微观雕琢（全站）
   精致滚动条 / 防误选中 / 防滚动链 / 原生控件着色 / 分段控件 / 平滑锚点
   ============================================================ */

/* — 精致滚动条：细、圆、悬浮加深（macOS/iOS overlay 观感）— */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ui-text-muted) 34%, transparent) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ui-text-muted) 30%, transparent);
  border-radius: 8px; border: 3px solid transparent; background-clip: padding-box;
  transition: background-color .2s var(--ui-decel, ease);
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ui-text-muted) 55%, transparent); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* — 平滑锚点滚动 + 吸顶偏移（点导航不再被顶栏遮住）— */
html { scroll-behavior: smooth; }
:where([id]) { scroll-margin-top: calc(var(--ui-header-height, 64px) + 14px); }

/* — 交互元素禁止选中文本：避免双击/拖拽误高亮，手感更顺 — */
.ui-button, .ui-icon-button, .ui-tab, .ui-nav-link, .ui-badge, .ui-option,
.ui-account-chip, .ui-mobile-link, .ui-bottom-nav-link, .ui-brand,
.ui-stat-label, label { -webkit-user-select: none; user-select: none; }

/* — 光标一致性 — */
.ui-tab, .ui-nav-link, .ui-account-chip, [role="button"], summary { cursor: pointer; }
:disabled, .is-disabled, [aria-disabled="true"] { cursor: not-allowed; }

/* — 滚动区域防滚动链（滚到底不牵动整页，原生 app 感）— */
.ui-modal-body, .ui-page, [data-scroll], .ui-scroll { overscroll-behavior: contain; }

/* — 原生表单控件着色为品牌色（复选框/单选/滑块）— */
:root { accent-color: var(--ui-primary); }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--ui-primary); }

/* — 占位符更柔和 — */
::placeholder { color: var(--ui-text-muted); opacity: .85; }

/* — iOS 分段控件：选中段做成带柔和投影的白色药丸，切换时平滑过渡 — */
.ui-tabs { gap: 3px; }
.ui-tab { transition: background var(--ui-transition), color var(--ui-transition), box-shadow var(--ui-transition), transform .3s var(--ui-spring, ease); }
.ui-tab.is-active, .ui-tab[aria-selected="true"] {
  background: var(--ui-surface);
  color: var(--ui-primary-strong);
  box-shadow: 0 1px 2px rgb(15 23 42 / .12), 0 2px 6px -2px rgb(15 23 42 / .14);
}
.ui-tab:not(.is-active):hover { color: var(--ui-text); background: color-mix(in srgb, var(--ui-surface) 55%, transparent); }

/* — 链接下划线优雅偏移 — */
a:not(.ui-button):not(.ui-nav-link):not(.ui-tab):not(.sidebar-item) { text-underline-offset: 2px; }

/* — 图片默认不可拖拽出鬼影（UI 图标/头像）— */
.ui-avatar img, .ui-brand img, svg { -webkit-user-drag: none; user-select: none; }