/* ==========================================================================
   秋泽吉数 · 网页前端 · 共享组件（作用域版本）
   --------------------------------------------------------------------------
   由 deploy/scope-shared.mjs 从 shared/components.css 生成，请勿手工编辑。
   所有类名加 dsh- 前缀，避免与前端既有的 .card/.tabs/.modal 等通用类名冲突。
   原文件修改后需重新生成本文件。
   ========================================================================== */

/* ==========================================================================
   秋泽吉数 · 共享组件层
   --------------------------------------------------------------------------
   四端（网页前端 / 后台管理端 / 代理端 / App 端）共用的组件样式。
   全部取值来自 design-tokens.css，本文件不出现任何硬编码色值。

   落地七项设计原则：
     1. 准确的嵌套圆角   → .r-nest-* 工具类 + 组件内统一用 --r-inset-*
     2. 主次操作区分明确 → .btn / .btn-primary / .btn-secondary / .btn-ghost
     3. 权重区分拉开对比 → .t-display/.t-title/.t-heading/.t-body/.t-label/.t-caption
     4. 清晰文本对齐方式 → .ta-* / .measure-* / .tnum
     5. 突出内容展示     → .surface-* 四级表面 + .elev-* 阴影层级
     6. 柔和阴影的透气性 → 所有阴影走 --shadow-*（低透明度+大扩散+双层）
     7. 统一的间距分割   → .stack-* / .row-* / .pad-* 全部基于 --sp-*
   ========================================================================== */

/* ==========================================================================
   0. 基础重置（组件层自带，保证独立引入也正常）
   ========================================================================== */
*,*::before,*::after{ box-sizing: border-box; }

/* ==========================================================================
   1. 文本权重体系（原则 3 / 4）
   六级语义文本。字号、字重、行高三者同时变化，层级一眼可辨。
   ========================================================================== */
.dsh-t-display{
  font-size: var(--text-display-size);
  font-weight: var(--text-display-weight);
  line-height: var(--text-display-lh);
  letter-spacing: var(--ls-tight);
  color: var(--ink-strong);
}
.dsh-t-title{
  font-size: var(--text-title-size);
  font-weight: var(--text-title-weight);
  line-height: var(--text-title-lh);
  letter-spacing: var(--ls-tight);
  color: var(--ink-strong);
}
.dsh-t-heading{
  font-size: var(--text-heading-size);
  font-weight: var(--text-heading-weight);
  line-height: var(--text-heading-lh);
  color: var(--ink-strong);
}
.dsh-t-body{
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-lh);
  color: var(--ink);
}
.dsh-t-label{
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  line-height: var(--text-label-lh);
  color: var(--ink);
}
.dsh-t-caption{
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  line-height: var(--text-caption-lh);
  color: var(--dim);
}

/* 弱化 / 强调修饰 */
.dsh-t-muted{ color: var(--dim); }
.dsh-t-subtle{ color: var(--dim-2); }
.dsh-t-strong{ color: var(--ink-strong); font-weight: var(--fw-bold); }
.dsh-t-brand{ color: var(--brand); }
.dsh-t-danger{ color: var(--red-ink); }
.dsh-t-success{ color: var(--green-ink); }
.dsh-t-warn{ color: var(--orange-ink); }

/* 数字等宽：数据列对齐的基础 */
.dsh-tnum,.dsh-num{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 单行截断 / 多行截断 */
.dsh-truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.dsh-clamp-2,.dsh-clamp-3{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dsh-clamp-2{ -webkit-line-clamp: 2; line-clamp: 2; }
.dsh-clamp-3{ -webkit-line-clamp: 3; line-clamp: 3; }

/* 对齐工具（原则 4） */
.dsh-ta-start{ text-align: var(--align-start); }
.dsh-ta-center{ text-align: var(--align-center); }
.dsh-ta-end{ text-align: var(--align-end); }
.dsh-measure-narrow{ max-width: var(--measure-narrow); }
.dsh-measure-base{ max-width: var(--measure-base); }
.dsh-measure-wide{ max-width: var(--measure-wide); }

/* ==========================================================================
   2. 表面与层级（原则 5「突出内容展示」/ 6「柔和阴影」）
   四级表面：page → section → card → raised
   ========================================================================== */
.dsh-surface-page{ background: var(--bg); }
.dsh-surface-section{ background: var(--bg-2); }
.dsh-surface-card{ background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-xl); }
.dsh-surface-raised{ background: var(--card-raised); border: 1px solid var(--line-soft); border-radius: var(--r-xl); box-shadow: var(--shadow-md); }
.dsh-surface-sunken{ background: var(--bg-sunk); border-radius: var(--r-lg); box-shadow: var(--shadow-inset); }

/* 阴影层级 */
.dsh-elev-0{ box-shadow: none; }
.dsh-elev-1{ box-shadow: var(--shadow-sm); }
.dsh-elev-2{ box-shadow: var(--shadow); }
.dsh-elev-3{ box-shadow: var(--shadow-md); }
.dsh-elev-4{ box-shadow: var(--shadow-lg); }
.dsh-elev-5{ box-shadow: var(--shadow-xl); }

/* 卡片：默认态 + 可交互态 */
.dsh-card{
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.dsh-card-pad{ padding: var(--sp-5); }
.dsh-card-pad-lg{ padding: var(--sp-6); }
.dsh-card-hover{
  transition: transform var(--dur) var(--ease-decelerate),
              box-shadow var(--dur) var(--ease-decelerate),
              border-color var(--dur) var(--ease-decelerate);
}
.dsh-card-hover:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand-line);
}
.dsh-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line-soft);
}
.dsh-card-head .dsh-card-title{
  font-size: var(--text-heading-size);
  font-weight: var(--text-heading-weight);
  line-height: var(--text-heading-lh);
  color: var(--ink-strong);
  margin: 0;
}
.dsh-card-body{ padding: var(--sp-5); }
.dsh-card-foot{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--line-soft);
  background: var(--bg-2);
}

/* 渐变描边卡片（Galaxy 手法：用双层背景做渐变边框） */
.dsh-card-outline{
  position: relative;
  border-radius: var(--r-xl);
  padding: 1.5px;
  background-image: var(--grad-brand);
  box-shadow: var(--shadow-md);
}
.dsh-card-outline > .dsh-card-inner{
  background: var(--card);
  border-radius: calc(var(--r-xl) - 1.5px);   /* 嵌套圆角：外层 − 描边宽 */
  padding: var(--sp-5);
}

/* ==========================================================================
   3. 嵌套圆角工具（原则 1）
   子元素圆角 = 父元素圆角 − 父元素内边距
   ========================================================================== */
.dsh-r-xs{ border-radius: var(--r-xs); }
.dsh-r-sm{ border-radius: var(--r-sm); }
.dsh-r-md{ border-radius: var(--r-md); }
.dsh-r-lg{ border-radius: var(--r-lg); }
.dsh-r-xl{ border-radius: var(--r-xl); }
.dsh-r-2xl{ border-radius: var(--r-2xl); }
.dsh-r-3xl{ border-radius: var(--r-3xl); }
.dsh-r-full{ border-radius: var(--r-full); }

/* 嵌套场景：外层带 padding 时，内层用这些值保证同心圆角 */
.dsh-r-nest-sm{ border-radius: var(--r-inset-sm); }   /* 外层 r-md  + padding 4 */
.dsh-r-nest-md{ border-radius: var(--r-inset-md); }   /* 外层 r-lg  + padding 4 */
.dsh-r-nest-lg{ border-radius: var(--r-inset-lg); }   /* 外层 r-xl  + padding 4 */
.dsh-r-nest-xl{ border-radius: var(--r-inset-xl); }   /* 外层 r-2xl + padding 6 */
.dsh-r-nest-2xl{ border-radius: var(--r-inset-2xl); }  /* 外层 r-3xl + padding 8 */

/* ==========================================================================
   4. 间距工具（原则 7「统一的间距分割」）
   所有取值来自 --sp-* 4px 阶梯
   ========================================================================== */
.dsh-stack-1 > * + *{ margin-top: var(--sp-1); }
.dsh-stack-2 > * + *{ margin-top: var(--sp-2); }
.dsh-stack-3 > * + *{ margin-top: var(--sp-3); }
.dsh-stack-4 > * + *{ margin-top: var(--sp-4); }
.dsh-stack-5 > * + *{ margin-top: var(--sp-5); }
.dsh-stack-6 > * + *{ margin-top: var(--sp-6); }
.dsh-stack-8 > * + *{ margin-top: var(--sp-8); }

.dsh-row-1{ display: flex; align-items: center; gap: var(--sp-1); }
.dsh-row-2{ display: flex; align-items: center; gap: var(--sp-2); }
.dsh-row-3{ display: flex; align-items: center; gap: var(--sp-3); }
.dsh-row-4{ display: flex; align-items: center; gap: var(--sp-4); }
.dsh-row-6{ display: flex; align-items: center; gap: var(--sp-6); }

.dsh-row-between{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.dsh-row-wrap{ flex-wrap: wrap; }
.dsh-row-start{ align-items: flex-start; }
.dsh-row-end{ justify-content: flex-end; }
.dsh-row-center{ justify-content: center; }
.dsh-col{ display: flex; flex-direction: column; }
.dsh-col-stretch{ align-items: stretch; }
.dsh-grow{ flex: 1 1 auto; min-width: 0; }
.dsh-none{ flex: none; }

.dsh-pad-0{ padding: 0; }
.dsh-pad-2{ padding: var(--sp-2); }
.dsh-pad-3{ padding: var(--sp-3); }
.dsh-pad-4{ padding: var(--sp-4); }
.dsh-pad-5{ padding: var(--sp-5); }
.dsh-pad-6{ padding: var(--sp-6); }
.dsh-pad-8{ padding: var(--sp-8); }

.dsh-mt-2{ margin-top: var(--sp-2); } .dsh-mt-3{ margin-top: var(--sp-3); }
.dsh-mt-4{ margin-top: var(--sp-4); } .dsh-mt-6{ margin-top: var(--sp-6); }
.dsh-mb-2{ margin-bottom: var(--sp-2); } .dsh-mb-3{ margin-bottom: var(--sp-3); }
.dsh-mb-4{ margin-bottom: var(--sp-4); } .dsh-mb-6{ margin-bottom: var(--sp-6); }

/* 分割线：统一间距 */
.dsh-divider{
  height: 1px;
  background: var(--line-soft);
  border: 0;
  margin: var(--sp-4) 0;
}
.dsh-divider-strong{ background: var(--line); }

/* ==========================================================================
   5. 按钮（原则 2「主次操作区分明确」）
   三档视觉权重：primary（实心）> secondary（描边）> ghost（纯文字）
   同一屏内主操作只应出现一个。
   ========================================================================== */
.dsh-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--h-btn);
  padding: 0 var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--ls-normal);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur) var(--ease-decelerate),
              transform var(--dur-fast) var(--ease-standard);
}
.dsh-btn:focus-visible{ outline: none; box-shadow: var(--focus-ring); }
.dsh-btn:disabled,.dsh-btn[aria-disabled="true"]{ opacity: .5; cursor: not-allowed; pointer-events: none; }

/* ---- 主操作：实心靛蓝 + 主色投影 ---- */
.dsh-btn-primary{
  background: var(--act-primary-bg);
  color: var(--act-primary-fg);
  box-shadow: var(--act-primary-shadow);
}
.dsh-btn-primary:hover:not(:disabled){ background: var(--act-primary-bg-h); transform: translateY(-1px); }
.dsh-btn-primary:active:not(:disabled){ transform: translateY(0) scale(.985); box-shadow: var(--shadow-sm); }

/* ---- 次操作：描边 + 主色文字 ---- */
.dsh-btn-secondary{
  background: var(--act-secondary-bg);
  color: var(--act-secondary-fg);
  border-color: var(--act-secondary-border);
  box-shadow: var(--act-secondary-shadow);
}
.dsh-btn-secondary:hover:not(:disabled){ background: var(--act-secondary-bg-h); border-color: var(--brand); }
.dsh-btn-secondary:active:not(:disabled){ transform: scale(.985); }

/* ---- 三级操作：纯文字，无边框无底色 ---- */
.dsh-btn-ghost{
  background: transparent;
  color: var(--act-tertiary-fg);
  padding: 0 var(--sp-3);
}
.dsh-btn-ghost:hover:not(:disabled){ background: var(--act-tertiary-bg-h); color: var(--act-tertiary-fg-h); }
.dsh-btn-ghost:active:not(:disabled){ transform: scale(.985); }

/* ---- 危险操作 ---- */
.dsh-btn-danger{
  background: var(--act-danger-bg);
  color: var(--act-danger-fg);
  box-shadow: var(--act-danger-shadow);
}
.dsh-btn-danger:hover:not(:disabled){ background: var(--act-danger-bg-h); transform: translateY(-1px); }
.dsh-btn-danger:active:not(:disabled){ transform: translateY(0) scale(.985); }

/* ---- 成功操作 ---- */
.dsh-btn-success{
  background: var(--green);
  color: #fff;
  box-shadow: 0 2px 6px rgba(18,137,74,.18), 0 10px 24px rgba(18,137,74,.16);
}
.dsh-btn-success:hover:not(:disabled){ background: var(--green-ink); transform: translateY(-1px); }

/* ---- 浅底按钮（用于卡片内次级动作） ---- */
.dsh-btn-soft{
  background: var(--brand-soft);
  color: var(--brand);
}
.dsh-btn-soft:hover:not(:disabled){ background: var(--brand-line); }

/* ---- 尺寸 ---- */
.dsh-btn-sm{ height: var(--h-btn-sm); padding: 0 var(--sp-3); font-size: var(--fs-md); border-radius: var(--r-sm); }
.dsh-btn-lg{ height: var(--h-btn-lg); padding: 0 var(--sp-6); font-size: var(--fs-lg); border-radius: var(--r-lg); }
.dsh-btn-xl{ height: var(--h-btn-xl); padding: 0 var(--sp-8); font-size: var(--fs-lg); border-radius: var(--r-lg); font-weight: var(--fw-bold); }
.dsh-btn-block{ width: 100%; }
.dsh-btn-icon{
  width: var(--h-btn);
  padding: 0;
  border-radius: var(--r-md);
}
.dsh-btn-icon.dsh-btn-sm{ width: var(--h-btn-sm); }
.dsh-btn-icon.dsh-btn-lg{ width: var(--h-btn-lg); }

/* 按钮内图标统一尺寸，避免各端不一致 */
.dsh-btn > svg,.dsh-btn > img{ width: 1.05em; height: 1.05em; flex: none; }

/* ==========================================================================
   6. 表单
   ========================================================================== */
.dsh-field{ display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }

.dsh-field-label{
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--ink);
}
.dsh-field-label .dsh-req{ color: var(--red); margin-left: var(--sp-1); }
.dsh-field-hint{ font-size: var(--fs-sm); color: var(--dim); line-height: var(--lh-snug); }
.dsh-field-error{ font-size: var(--fs-sm); color: var(--red-ink); line-height: var(--lh-snug); }

.dsh-input,.dsh-textarea,.dsh-select{
  width: 100%;
  min-width: 0;
  height: var(--h-input);
  padding: 0 var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: normal;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.dsh-input::placeholder,.dsh-textarea::placeholder{ color: var(--dim-2); }
.dsh-input:hover,.dsh-textarea:hover,.dsh-select:hover{ border-color: var(--brand-line); }
.dsh-input:focus,.dsh-textarea:focus,.dsh-select:focus{
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}
.dsh-input:disabled,.dsh-textarea:disabled,.dsh-select:disabled{
  background: var(--bg-sunk);
  color: var(--dim);
  cursor: not-allowed;
}
.dsh-input[aria-invalid="true"],.dsh-textarea[aria-invalid="true"]{
  border-color: var(--red);
  box-shadow: var(--focus-ring-danger);
}

.dsh-textarea{
  height: auto;
  min-height: 88px;
  padding: var(--sp-3) var(--sp-4);
  line-height: var(--lh);
  resize: vertical;
}
.dsh-select{
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--sp-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5L6 8.5L10 4.5' stroke='%235c5c70' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  background-size: 12px;
  cursor: pointer;
}
.dsh-input-sm{ height: var(--h-btn-sm); font-size: var(--fs-md); padding: 0 var(--sp-3); }
.dsh-input-lg{ height: var(--h-btn-lg); font-size: var(--fs-lg); padding: 0 var(--sp-5); }

/* 带图标的输入框 */
.dsh-input-group{ position: relative; display: flex; align-items: center; }
.dsh-input-group .dsh-input{ padding-left: var(--sp-10); }
.dsh-input-group > .dsh-input-icon{
  position: absolute;
  left: var(--sp-4);
  display: flex;
  color: var(--dim);
  pointer-events: none;
}
.dsh-input-group > .dsh-input-action{
  position: absolute;
  right: var(--sp-2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--h-btn-sm);
  height: var(--h-btn-sm);
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.dsh-input-group > .dsh-input-action:hover{ color: var(--ink); background: var(--bg-2); }

/* 表单网格 */
.dsh-form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-5);
}
.dsh-form-grid .dsh-full{ grid-column: 1 / -1; }
@media (max-width: 640px){ .dsh-form-grid{ grid-template-columns: 1fr; } }

/* 复选框 / 单选框 */
.dsh-check{
  display: inline-flex;
  align-items: flex-start;
  gap: var(--sp-2);
  cursor: pointer;
  font-size: var(--fs-md);
  color: var(--ink);
  line-height: var(--lh-snug);
}
.dsh-check input[type="checkbox"],.dsh-check input[type="radio"]{
  flex: none;
  width: 16px; height: 16px;
  margin: 2px 0 0;
  accent-color: var(--brand);
  cursor: pointer;
}

/* 开关 */
.dsh-switch{ display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; }
.dsh-switch input{ position: absolute; opacity: 0; width: 0; height: 0; }
.dsh-switch .dsh-sl{
  position: relative;
  width: 44px; height: 25px;
  flex: none;
  border-radius: var(--r-full);
  background: var(--line-strong);
  box-shadow: var(--shadow-inset);
  transition: background var(--dur) var(--ease-standard);
}
.dsh-switch .dsh-sl::after{
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-spring);
}
.dsh-switch input:checked + .dsh-sl{ background: var(--brand); }
.dsh-switch input:checked + .dsh-sl::after{ transform: translateX(19px); }
.dsh-switch input:focus-visible + .dsh-sl{ box-shadow: var(--focus-ring); }

/* ==========================================================================
   7. 徽章 / 状态点 / 药丸
   ========================================================================== */
.dsh-badge{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 20px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--bg-sunk);
  color: var(--dim);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
}
.dsh-badge-brand{ background: var(--brand-soft);  color: var(--brand-ink); }
.dsh-badge-success{ background: var(--green-soft);  color: var(--green-ink); }
.dsh-badge-danger{ background: var(--red-soft);    color: var(--red-ink); }
.dsh-badge-warn{ background: var(--orange-soft); color: var(--orange-ink); }
.dsh-badge-info{ background: var(--blue-soft);   color: var(--blue-ink); }
.dsh-badge-purple{ background: var(--purple-soft); color: var(--purple-ink); }
.dsh-badge-gold{ background: var(--gold-soft);   color: var(--gold-ink); }

.dsh-badge-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--red);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.dsh-dot{
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--dim-2);
  flex: none;
}
.dsh-dot-success{ background: var(--green); }
.dsh-dot-danger{ background: var(--red); }
.dsh-dot-warn{ background: var(--orange); }
.dsh-dot-brand{ background: var(--brand); }
.dsh-dot-live{ background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }

.dsh-pill{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 26px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--card);
  color: var(--dim);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-standard);
}
.dsh-pill:hover{ border-color: var(--brand-line); color: var(--brand); }
.dsh-pill.dsh-on{
  background: var(--brand-soft);
  border-color: var(--brand-line);
  color: var(--brand-ink);
  font-weight: var(--fw-medium);
}

/* ==========================================================================
   8. 分段控件 / 标签页
   ========================================================================== */
.dsh-segment{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-md);
  background: var(--bg-sunk);
  box-shadow: var(--shadow-inset);
}
.dsh-segment > button,.dsh-segment > .dsh-seg-item{
  height: calc(var(--h-btn-sm) + 2px);
  padding: 0 var(--sp-4);
  border: none;
  border-radius: var(--r-inset-sm);   /* 嵌套圆角：外层 r-md − 内边距 3px */
  background: transparent;
  color: var(--dim);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-standard);
}
.dsh-segment > button:hover{ color: var(--ink); }
.dsh-segment > button.dsh-on,.dsh-segment > .dsh-seg-item.dsh-on{
  background: var(--card);
  color: var(--brand);
  box-shadow: var(--shadow-xs);
}

.dsh-tabs{
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--line);
}
.dsh-tabs button,.dsh-tabs .dsh-tab-item{
  position: relative;
  padding: var(--sp-3) var(--sp-4);
  border: none;
  background: transparent;
  color: var(--dim);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard);
}
.dsh-tabs button:hover{ color: var(--ink); }
.dsh-tabs button.dsh-on,.dsh-tabs .dsh-tab-item.dsh-on{ color: var(--brand); font-weight: var(--fw-bold); }
.dsh-tabs button.dsh-on::after,.dsh-tabs .dsh-tab-item.dsh-on::after{
  content: '';
  position: absolute;
  left: var(--sp-4); right: var(--sp-4);
  bottom: -1px;
  height: 2px;
  border-radius: var(--r-full);
  background: var(--brand);
}

/* ==========================================================================
   9. 表格
   ========================================================================== */
.dsh-table-wrap{
  width: 100%;
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  background: var(--card);
}
table.dsh-data{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-md);
}
table.dsh-data th{
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-2);
  color: var(--dim);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-align: var(--align-start);
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
table.dsh-data td{
  padding: var(--sp-3) var(--sp-4);
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
table.dsh-data tbody tr:last-child td{ border-bottom: none; }
table.dsh-data tbody tr{ transition: background var(--dur-fast) var(--ease-standard); }
table.dsh-data tbody tr:hover{ background: var(--brand-softer); }
/* 数字列右对齐（原则 4） */
table.dsh-data th.dsh-num,table.dsh-data td.dsh-num,table.dsh-data th[data-align="num"],table.dsh-data td[data-align="num"]{
  text-align: var(--align-number);
  font-variant-numeric: tabular-nums;
}
table.dsh-data td.dsh-actions{ text-align: var(--align-end); white-space: nowrap; }

/* ==========================================================================
   10. 弹窗 / 遮罩
   ========================================================================== */
.dsh-modal-mask{
  position: fixed;
  inset: 0;
  z-index: var(--z-mask);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: var(--overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: dsh-mask-in var(--dur) var(--ease-decelerate);
}
.dsh-modal-mask[hidden]{ display: none; }

.dsh-modal{
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - var(--sp-10));
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: dsh-modal-in var(--dur-slow) var(--ease-decelerate);
}
.dsh-modal-sm{ max-width: 380px; }
.dsh-modal-lg{ max-width: 680px; }
.dsh-modal-xl{ max-width: 900px; }

.dsh-modal-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--line-soft);
  flex: none;
}
.dsh-modal-head h3,.dsh-modal-title{
  margin: 0;
  font-size: var(--text-heading-size);
  font-weight: var(--text-heading-weight);
  line-height: var(--text-heading-lh);
  color: var(--ink-strong);
}
.dsh-modal-body{
  padding: var(--sp-6);
  overflow-y: auto;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}
.dsh-modal-foot{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--line-soft);
  background: var(--bg-2);
  flex: none;
}
.dsh-modal-close,.dsh-m-close{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  flex: none;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--dim);
  font-size: var(--fs-xl);
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.dsh-modal-close:hover,.dsh-m-close:hover{ background: var(--red-soft); color: var(--red-ink); }

@keyframes dsh-mask-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dsh-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   11. Toast
   ========================================================================== */
.dsh-toast{
  position: fixed;
  left: 50%;
  bottom: var(--sp-8);
  z-index: var(--z-toast);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: min(92vw, 420px);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-full);
  background: var(--ink-strong);
  color: #fff;
  font-size: var(--fs-md);
  box-shadow: var(--shadow-xl);
  animation: dsh-toast-in var(--dur-slow) var(--ease-decelerate);
  pointer-events: none;
}
@keyframes dsh-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ==========================================================================
   12. 空状态 / 加载
   ========================================================================== */
.dsh-state-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-10) var(--sp-5);
  text-align: center;
  color: var(--dim);
}
.dsh-state-box .dsh-state-icon{ font-size: 34px; line-height: 1; opacity: .55; }
.dsh-state-box .dsh-state-title{
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  color: var(--ink);
}
.dsh-state-box .dsh-state-desc{ font-size: var(--fs-md); color: var(--dim); max-width: var(--measure-narrow); }

.dsh-skeleton{
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.dsh-skeleton::after{
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  animation: dsh-shimmer 1.4s infinite;
}
@keyframes dsh-shimmer { to { transform: translateX(100%); } }

.dsh-spinner{
  width: 18px; height: 18px;
  border: 2px solid var(--brand-line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: dsh-spin .7s linear infinite;
}
@keyframes dsh-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   13. 分页
   ========================================================================== */
.dsh-pager{ display: flex; align-items: center; justify-content: center; gap: var(--sp-1); }
.dsh-pager button{
  min-width: var(--h-btn-sm);
  height: var(--h-btn-sm);
  padding: 0 var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-standard);
}
.dsh-pager button:hover:not(:disabled){ border-color: var(--brand); color: var(--brand); }
.dsh-pager button.dsh-on{ background: var(--brand); border-color: var(--brand); color: #fff; font-weight: var(--fw-bold); }
.dsh-pager button:disabled{ opacity: .4; cursor: not-allowed; }

/* ==========================================================================
   14. 统计卡（突出内容展示 · 原则 5）
   ========================================================================== */
.dsh-stat-card{
  position: relative;
  overflow: hidden;
  padding: var(--sp-5);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-decelerate), box-shadow var(--dur) var(--ease-decelerate);
}
.dsh-stat-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* 角落柔光：Galaxy 手法的克制版，只做氛围不抢内容 */
.dsh-stat-card::before{
  content: '';
  position: absolute;
  top: -40%; right: -20%;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: var(--grad-aurora);
  filter: blur(28px);
  pointer-events: none;
}
.dsh-stat-card .dsh-stat-label{
  position: relative;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--dim);
  letter-spacing: var(--ls-wide);
}
.dsh-stat-card .dsh-stat-value{
  position: relative;
  margin-top: var(--sp-2);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.dsh-stat-card .dsh-stat-delta{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.dsh-stat-card .dsh-stat-delta.dsh-up{ color: var(--green-ink); }
.dsh-stat-card .dsh-stat-delta.dsh-down{ color: var(--red-ink); }

.dsh-stat-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-4);
}

/* ==========================================================================
   15. 列表项（设置页 / 用户资料页大量使用）
   ========================================================================== */
.dsh-list{ display: flex; flex-direction: column; }
.dsh-list-item{
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 52px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.dsh-list-item + .dsh-list-item{ margin-top: 2px; }
.dsh-list-item:hover{ background: var(--brand-softer); }
.dsh-list-item:active{ background: var(--brand-soft); }
.dsh-list-item .dsh-li-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: var(--fs-lg);
}
.dsh-list-item .dsh-li-main{ flex: 1 1 auto; min-width: 0; }
.dsh-list-item .dsh-li-title{
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dsh-list-item .dsh-li-desc{
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dsh-list-item .dsh-li-value{ flex: none; font-size: var(--fs-md); color: var(--dim); }
.dsh-list-item .dsh-li-arrow{ flex: none; color: var(--dim-2); font-size: var(--fs-lg); }
.dsh-list-group{
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background: var(--card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.dsh-list-group .dsh-list-item{ border-radius: 0; padding: var(--sp-4) var(--sp-5); }
.dsh-list-group .dsh-list-item + .dsh-list-item{ margin-top: 0; border-top: 1px solid var(--line-soft); }
.dsh-list-group-title{
  padding: var(--sp-4) var(--sp-5) var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--dim);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

/* ==========================================================================
   16. 头像
   ========================================================================== */
.dsh-avatar{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  overflow: hidden;
}
.dsh-avatar img{ width: 100%; height: 100%; object-fit: cover; }
.dsh-avatar-sm{ width: 28px; height: 28px; font-size: var(--fs-sm); }
.dsh-avatar-lg{ width: 56px; height: 56px; font-size: var(--fs-xl); }
.dsh-avatar-xl{ width: 80px; height: 80px; font-size: var(--fs-3xl); }
.dsh-avatar-brand{ background: var(--grad-brand); color: #fff; }

/* ==========================================================================
   17. 悬浮操作按钮
   ========================================================================== */
.dsh-fab{
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: var(--z-fab);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border: none;
  border-radius: var(--r-xl);
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-2xl);
  box-shadow: var(--shadow-brand), var(--shadow-lg);
  cursor: pointer;
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-decelerate);
}
.dsh-fab:hover{ transform: translateY(-2px) scale(1.04); }
.dsh-fab:active{ transform: scale(.96); }

/* ==========================================================================
   18. 聊天气泡
   ========================================================================== */
.dsh-chat{ display: flex; flex-direction: column; gap: var(--sp-3); }
.dsh-msg{ display: flex; gap: var(--sp-2); max-width: 82%; }
.dsh-msg-bubble{
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: var(--lh);
  word-break: break-word;
}
.dsh-msg.dsh-me{ align-self: flex-end; flex-direction: row-reverse; }
.dsh-msg.dsh-me .dsh-msg-bubble{ background: var(--brand); color: #fff; }

/* ==========================================================================
   19. 提示气泡
   ========================================================================== */
.dsh-tip{
  position: relative;
  display: inline-flex;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--ink-strong);
  color: #fff;
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   20. 进度条
   ========================================================================== */
.dsh-progress{
  width: 100%;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--bg-sunk);
  overflow: hidden;
}
.dsh-progress > i{
  display: block;
  height: 100%;
  border-radius: var(--r-full);
  background: var(--brand);
  transition: width var(--dur-slow) var(--ease-decelerate);
}

/* ==========================================================================
   21. 响应式收敛
   ========================================================================== */
@media (max-width: 640px){
  .dsh-modal{ max-height: calc(100vh - var(--sp-6)); border-radius: var(--r-xl); }
  .dsh-modal-body{ padding: var(--sp-5); }
  .dsh-modal-head,.dsh-modal-foot{ padding: var(--sp-4) var(--sp-5); }
  .dsh-stat-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .dsh-stat-card{ padding: var(--sp-4); }
  .dsh-stat-card .dsh-stat-value{ font-size: var(--fs-3xl); }
  .dsh-form-grid{ grid-template-columns: 1fr; }
  .dsh-toast{ bottom: var(--sp-5); }
}

/* 触屏设备：保证最小可点区（原则 2 的可达性前提） */
@media (hover: none) and (pointer: coarse){
  .dsh-btn{ min-height: var(--touch-min); }
  .dsh-list-item{ min-height: 56px; }
  .dsh-pill{ height: 32px; }
}