/* ============================================================================
 * DSH UI Kit —— 按 DSH 设计语言重写的可复用组件层
 *
 * 依赖 tokens.css（先引入）。
 * 所有颜色/圆角/字体/动效一律走令牌，不写字面色值 —— 这是这套设计语言的纪律。
 * 数值出处（逐条对照，非臆造）：
 *   · 按钮   dsh-client-ui-primitives/lib/Button.module.css
 *   · 输入   dsh-client-ui-primitives/lib/Input.module.css
 *   · 复选   dsh-client-ui-primitives/lib/Checkbox.module.css
 *   · 弹窗   dsh-client-ui-primitives/lib/Modal.module.css
 *   · 卡片/引导排版  dsh-client-ui-settings-account（DesktopOnboarding.module.css）
 * ========================================================================== */

/* ── 文档基线 ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--dsw-alias-bg-base);
  color: var(--dsw-alias-label-primary);
  font-family: var(--dsw-font-family);
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline-color: var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
  outline-width: var(--dsw-focus-ring-width);
  outline-style: solid;
}

/* ══ 1. 排版 ═══════════════════════════════════════════════════════════════
 * 这套语言的性格：大标题用 300 字重 + 松行距，品牌词单独 500 切 Montserrat；
 * 正文一律 300 字重配三级色，绝不靠字号和深色制造层级。
 * ════════════════════════════════════════════════════════════════════════ */
.t-display { margin: 0; font-size: 28px; font-weight: 300; line-height: 48px; }
.t-h1      { margin: 0; font-size: 28px; font-weight: 300; line-height: 39px; }
.t-h2      { margin: 0; font-size: 20px; font-weight: 500; line-height: 28px; }
.t-card-title { font-size: 20px; font-weight: 400; line-height: 28px; }
.t-hero    { color: var(--dsw-alias-label-tertiary); font-size: 16px; font-weight: 300; line-height: 28px; }
.t-subtitle{ color: var(--dsw-alias-label-tertiary); font-size: 16px; font-weight: 300; line-height: 22px; }
.t-body    { font-size: 14px; line-height: 24px; color: var(--dsw-alias-label-secondary); }
.t-caption { font-size: 14px; line-height: 22px; color: var(--dsw-alias-label-tertiary); }
.t-card-desc { color: var(--dsw-alias-label-tertiary); font-size: 15px; font-weight: 300; line-height: 21px; }
.t-brand   { font-family: var(--dsw-font-family-brand); font-style: normal; font-weight: 500; white-space: nowrap; }
.t-code    { font-family: var(--ds-font-family-code); font-size: 12px; line-height: 20px; color: var(--dsw-alias-label-secondary); }

/* ══ 2. 按钮 ═══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 36px; padding: 0 14px;
  border: none; border-radius: var(--dsw-radius-md);
  background: transparent; color: var(--dsw-alias-label-primary);
  font-family: var(--dsw-font-family); font-size: 14px; font-weight: 500; line-height: 22px;
  cursor: pointer;
  transition: background-color var(--ds-transition-duration-fast), color var(--ds-transition-duration-fast), opacity var(--ds-transition-duration-fast);
}
.btn:disabled { cursor: not-allowed; opacity: .4; }
.btn--primary { background: var(--dsw-alias-button-primary-fill); color: var(--dsw-alias-label-primary-foreground); }
.btn--primary:hover:not(:disabled) { background: var(--dsw-alias-button-primary-hover); }
.btn--outline { border: .5px solid var(--dsw-alias-border-l3); }
.btn--outline:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover); }
.btn--ghost:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover); }
.btn--ghost:active:not(:disabled) { background: var(--dsw-alias-interactive-bg-active); }
.btn--sm { height: 28px; padding: 0 10px; border-radius: var(--dsw-radius-sm); font-size: 12px; line-height: 18px; }

/* 引导页专用大按钮：比常规按钮更高更宽，主次靠底色区分 */
.btn--onboarding { height: 44px; padding: 0 24px; }
.btn--onboarding.btn--secondary { background: var(--dsw-alias-onboarding-secondary-fill); }
.btn--onboarding.btn--secondary:hover { background: linear-gradient(var(--dsw-alias-interactive-bg-hover), var(--dsw-alias-interactive-bg-hover)), var(--dsw-alias-onboarding-secondary-fill); }
.btn--block { width: 100%; }

/* ══ 3. 输入框 ═════════════════════════════════════════════════════════════ */
.field {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 8px;
  border: .5px solid var(--dsw-alias-border-l4); border-radius: var(--dsw-radius-md);
  background: var(--dsw-alias-bg-layer-1);
}
.field:focus-within { border-color: var(--dsw-alias-state-business-primary); }
.field input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: var(--dsw-font-family); font-size: 14px; line-height: 22px; color: var(--dsw-alias-label-primary);
}
.field input::placeholder { color: var(--dsw-alias-label-dimmed); }
.field--lg { height: 36px; padding: 0 12px; }

/* ══ 4. 复选框 ═════════════════════════════════════════════════════════════ */
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--dsw-alias-brand-primary); cursor: inherit; }
.check:has(input:disabled) { cursor: default; opacity: .5; }

/* 卡片上的 24px 方框指示器（整卡可点，焦点环只画在卡外框） */
.indicator {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px;
  border: 2px solid var(--dsw-alias-onboarding-checkbox-border); border-radius: 6px;
  color: var(--dsw-alias-label-primary-foreground); background: 0 0;
}
.indicator svg { visibility: hidden; }
.card--selected .indicator { border-color: var(--dsw-alias-brand-primary); background: var(--dsw-alias-brand-primary); }
.card--selected .indicator svg { visibility: visible; }

/* ══ 5. 选项卡 ═════════════════════════════════════════════════════════════
 * 整套风格的辨识度就在这张卡：32px 圆角 + 毛玻璃填充 + 双层 accent 阴影，
 * 选中态是一圈 conic 渐变描边，且 14s 匀速旋转。
 * ════════════════════════════════════════════════════════════════════════ */
@property --card-border-angle { syntax: "<angle>"; inherits: false; initial-value: 90deg; }
@keyframes card-border-sweep { 0% { --card-border-angle: 90deg; } to { --card-border-angle: 450deg; } }

.card {
  --card-border-stops: var(--dsw-gradient-onboarding-blue-stops);
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  min-width: 0; min-height: 222px; padding: 48.5px 32.5px 64.5px;
  border: 0; border-radius: 32px;
  background: var(--dsw-alias-onboarding-card-fill);
  backdrop-filter: blur(32.609px);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  box-shadow: 8px 8px 24px color-mix(in srgb, var(--dsw-alias-onboarding-accent) 8%, transparent),
              4px 4px 12px color-mix(in srgb, var(--dsw-alias-onboarding-accent) 4%, transparent);
  transition: background-color var(--ds-transition-duration-fast);
}
.card--violet { --card-border-stops: var(--dsw-gradient-onboarding-violet-stops); }
.card--cyan   { --card-border-stops: var(--dsw-gradient-onboarding-cyan-stops); }
.card::before, .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; transition: opacity var(--ds-transition-duration-fast), border-color var(--ds-transition-duration-fast); }
.card::before { border: .5px solid var(--dsw-alias-border-l2); }
.card::after {
  padding: 2px;
  background: conic-gradient(from var(--card-border-angle), var(--card-border-stops));
  opacity: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
}
.card:hover::before { border-color: var(--dsw-alias-border-l4); }
.card:hover::after { opacity: .35; }
.card--selected::before { opacity: 0; }
.card--selected::after, .card--selected:hover::after { opacity: 1; }
.card--selected::after { animation: card-border-sweep 14s linear infinite; }
.card:focus-visible { outline: 2px solid var(--dsw-focus-ring-color); outline-offset: 5px; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 40px; margin-bottom: 12px; }
.card-icons { display: flex; align-items: center; gap: 6px; }
.card-icons svg { animation: icon-enter var(--ds-transition-duration) var(--ds-ease-in-out) both; }
@keyframes icon-enter { 0% { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
.card-icons svg:nth-child(2) { animation-delay: 30ms; }
.card-icons svg:nth-child(3) { animation-delay: 50ms; }
.card-icons svg:nth-child(4) { animation-delay: 62ms; }
.card-icons svg:nth-child(5) { animation-delay: 70ms; }
/* 网格布局：用途页两列、过程页三列，间距都是 17px */
.card-grid { display: grid; gap: 17px; }
.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 225px; padding-block: 1.5px; }

/* ══ 6. 弹窗 ═══════════════════════════════════════════════════════════════
 * 遮罩**有意不模糊**（--dsw-mask-blur: none），只压一层黑；
 * 引导弹窗覆盖原语默认的 380px 宽度，用 600px。
 * ════════════════════════════════════════════════════════════════════════ */
@keyframes modal-enter { from { opacity: 0; } to { opacity: 1; } }
.modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal__mask { position: absolute; inset: 0; background: var(--dsw-alias-bg-mask-1); backdrop-filter: var(--dsw-mask-blur); animation: modal-enter var(--ds-transition-duration) var(--ds-ease-in-out); }
.modal__dialog {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 20px;
  width: min(380px, 100%); max-height: 100%; padding: 0 0 24px; overflow: hidden;
  border: 0; border-radius: var(--dsw-radius-panel);
  background: var(--dsw-alias-bg-layer-2); box-shadow: var(--dsw-elevation-prominent);
  animation: modal-enter var(--ds-transition-duration) var(--ds-ease-in-out);
}
.modal__dialog--wide { width: min(600px, 100%); }
.modal__content { display: flex; flex-direction: column; min-height: 0; padding: 28px; overflow-y: auto; }
.modal__title { margin: 0; font-size: 20px; font-weight: 500; line-height: 28px; color: var(--dsw-alias-label-primary); outline: none; }
.modal__body { margin-top: 20px; }
.modal__body p { margin: 0; }
.modal__body p + p { margin-top: 12px; }
.modal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.modal__actions .btn { min-width: 120px; }
.modal__error { margin: 16px 0 0; font-size: 14px; line-height: 22px; color: var(--dsw-alias-state-error-primary); }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.modal__close { display: flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border: 0; border-radius: 28px; background: 0 0; color: var(--dsw-alias-label-secondary); cursor: pointer; }
.modal__close:hover { background: var(--dsw-alias-interactive-bg-hover); }

/* ══ 7. 引导页版式骨架 ═════════════════════════════════════════════════════ */
.page { --page-padding: clamp(40px, 8.333vw, 120px); position: relative; width: 100%; min-height: 480px; overflow: hidden; }
.page__content { width: min(calc(100% - 2 * var(--page-padding)), 1200px); margin-inline: auto; }
.page__nav {
  pointer-events: none; /* 空白区透鼠标，避免挡住主操作 */
  display: flex; justify-content: space-between;
  width: min(calc(100% - 2 * var(--page-padding)), 1200px);
  margin: 0 auto; padding-bottom: clamp(24px, 7.61vh, 70px);
}
.page__nav button { pointer-events: auto; display: flex; align-items: center; gap: 20px; padding: 0; border: 0; background: 0 0; color: var(--dsw-alias-label-tertiary); font: inherit; font-size: 16px; font-weight: 300; line-height: 32px; cursor: pointer; }
.page__nav button:hover { color: var(--dsw-alias-label-primary); }
.back-icon { flex: none; width: 20.2792px; height: 16.825px; background: currentColor; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2220.2792%22%20height%3D%2216.825%22%20viewBox%3D%220%200%2020.2792%2016.825%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20id%3D%22Vector%205008%22%20d%3D%22M1.01986%208.58958H20.2792M8.54303%200.407656L0.825554%208.58958L8.54303%2016.4077%22%20stroke%3D%22%2381858C%22%20stroke-width%3D%221.18823%22%2F%3E%20%3C%2Fsvg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2220.2792%22%20height%3D%2216.825%22%20viewBox%3D%220%200%2020.2792%2016.825%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20id%3D%22Vector%205008%22%20d%3D%22M1.01986%208.58958H20.2792M8.54303%200.407656L0.825554%208.58958L8.54303%2016.4077%22%20stroke%3D%22%2381858C%22%20stroke-width%3D%221.18823%22%2F%3E%20%3C%2Fsvg%3E") center/contain no-repeat; }

/* ══ 8. 动效令牌速查 ═══════════════════════════════════════════════════════ */
.motion-row { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; align-items: center; }
.motion-demo { height: 10px; border-radius: 5px; background: var(--dsw-alias-onboarding-accent); transform-origin: left center; }
.motion-demo--enter { animation: demo-enter .1s ease-out both; }
.motion-demo--switch { animation: demo-enter 40ms ease-out both; }
.motion-demo--exit { animation: demo-exit .18s ease-out both; }
.motion-demo--ring { animation: demo-exit var(--ds-transition-duration) var(--ds-ease-in-out) both; }
@keyframes demo-enter { 0% { opacity: 0; transform: scaleX(.2); } to { opacity: 1; transform: scaleX(1); } }
@keyframes demo-exit { 0% { opacity: 1; } to { opacity: .25; } }

/* ══ 9. 规范页自身的外壳（不属于组件层） ══════════════════════════════════ */
.spec { max-width: 1100px; margin: 0 auto; padding: 48px 32px 96px; }
.spec__head { border-bottom: .5px solid var(--dsw-alias-border-l2); padding-bottom: 24px; margin-bottom: 8px; }
.spec__head h1 { margin: 0; font-size: 28px; font-weight: 300; line-height: 48px; }
.spec__head p { margin: 12px 0 0; font-size: 14px; line-height: 24px; color: var(--dsw-alias-label-tertiary); }
.spec section { padding: 40px 0 8px; border-bottom: .5px solid var(--dsw-alias-border-l2); }
.spec h2 { margin: 0 0 4px; font-size: 16px; font-weight: 500; line-height: 24px; }
.spec .hint { margin: 0 0 24px; font-size: 13px; line-height: 20px; color: var(--dsw-alias-label-tertiary); }
.spec .row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 20px; }
.spec .label { width: 132px; flex: none; font-family: var(--ds-font-family-code); font-size: 12px; color: var(--dsw-alias-label-tertiary); }
.spec .panel { padding: 24px; border: .5px solid var(--dsw-alias-border-l2); border-radius: var(--dsw-radius-lg); background: var(--dsw-alias-bg-layer-1); margin-bottom: 20px; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.swatch { border: .5px solid var(--dsw-alias-border-l2); border-radius: var(--dsw-radius-sm); overflow: hidden; }
.swatch__chip { height: 44px; }
.swatch__meta { padding: 6px 8px; font-family: var(--ds-font-family-code); font-size: 11px; line-height: 16px; color: var(--dsw-alias-label-tertiary); }