/**
 * StarSaltTheme · 共享 UI 组件层
 *
 * 唯一权威来源：前端demo/assets/css/base/ui.css +
 *               pages/{security,messages,api}.css 里重复出现的组件段。
 * demo 里这些样式是「每个页面各抄一份」（messages-toast / api-toast / security-toast…），
 * 这里统一收口成 ss-* 一套类，页面不再重复造轮子。
 *
 * 组件清单：
 *   .ss-toast          顶部居中提示（js/common/ss-toast.js 驱动）
 *   .ss-pager          分页条（components/ssPager）
 *   .ss-modal          弹窗（components/ssModal，含 mask/head/body/foot）
 *   .ss-empty          空态
 *   .ss-tag            徽标（含语义色变体）
 *   .ss-tabs           按钮式分类 tab（components/ssTabs，支持未读角标）
 *   .ss-card / .ss-section-head  卡片与卡头
 *   .ss-stat / .ss-chart         统计块与柱状图
 *   .ss-switch         开关（纯展示/受控两用，供未来功能使用）
 *
 * 约定：只写共享组件本身，页面私有布局放各自的 *-ss.css；
 *      color-mix() 在目标浏览器不可靠，半透明底色一律用 rgba 定值。
 */

/* ============================================================
   1. Toast（demo ui.css:9-32）
   ============================================================ */
.ss-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  z-index: 1300;
  padding: 10px var(--space-24);
  background: var(--toast-bg);
  color: #fff;
  box-shadow: var(--shadow-toast);
  font-size: var(--fs-13);
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-60px);
  transition: transform 0.14s ease, opacity 0.14s ease, visibility 0.14s;
}
.ss-toast.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   2. Pager（demo ui.css:34-88）
   ============================================================ */
.ss-pager {
  padding: var(--space-12) var(--space-16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--divider);
}
.ss-pager-info {
  color: var(--text-5);
  font-size: var(--fs-12);
  flex-shrink: 0;
}
.ss-pager-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ss-pager-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--card-border);
  background: var(--surface);
  color: var(--text-3);
  font-size: var(--fs-16);
  cursor: pointer;
}
.ss-pager-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.ss-pager-btn:not(:disabled):hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}
.ss-pager-nums {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ss-pager-num {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--card-border);
  background: var(--surface);
  color: var(--text-3);
  font-size: var(--fs-12);
  font-weight: 600;
  cursor: pointer;
}
.ss-pager-num:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}
.ss-pager-num.active {
  border-color: var(--brand-blue);
  background: var(--brand-blue);
  color: #fff;
}
.ss-pager-size {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-5);
  font-size: var(--fs-12);
  flex-shrink: 0;
}
.ss-pager-size select {
  height: 32px;
  padding: 0 24px 0 8px;
  border: 1px solid var(--card-border);
  background: var(--surface);
  color: var(--text-3);
  font: inherit;
  font-size: var(--fs-12);
  outline: none;
}

/* ============================================================
   3. Modal（demo ui.css:93-121 + security/messages/api 的 modal 段）
   ============================================================ */
.ss-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(5, 10, 24, 0.46);
}
.ss-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1201;
  width: min(440px, calc(100% - 32px));
  transform: translate(-50%, -50%);
  background: var(--surface);
  border-radius: var(--ss-radius-card);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}
.ss-modal-head {
  height: 58px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--divider);
}
.ss-modal-head h3 {
  font-size: var(--fs-15);
  color: var(--text-main);
}
.ss-modal-head button {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-5);
  font-size: var(--fs-22);
  cursor: pointer;
  line-height: 1;
}
.ss-modal-head button:hover {
  color: var(--text-main);
}
.ss-modal-body {
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* 大弹窗（申请开票 / 抬头表单）在矮屏上不能顶出视口：头脚固定，正文内部滚动 */
  overflow-y: auto;
  max-height: calc(100vh - 140px);
}
.ss-modal-foot {
  padding: 13px var(--space-20);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-8);
  border-top: 1px solid var(--divider);
}
.ss-modal-foot button {
  height: 34px;
  padding: 0 18px;
  font-size: var(--fs-13);
  font-weight: 500;
  cursor: pointer;
  /* 原先缺 border-radius：弹窗按钮是直角，与全站按钮的圆角语言不一致 */
  border-radius: var(--ss-radius-btn);
  border: 1px solid var(--card-border);
  background: var(--surface);
  color: var(--text-3);
  transition: color var(--motion-mid), background var(--motion-mid),
    border-color var(--motion-mid);
}
.ss-modal-cancel:hover {
  border-color: var(--text-5);
  color: var(--text-main);
}
.ss-modal-foot .ss-modal-confirm {
  border-color: var(--brand-blue);
  background: var(--brand-blue);
  color: #fff;
}
.ss-modal-foot .ss-modal-confirm:hover:not(:disabled) {
  background: var(--brand-blue-dark);
  border-color: var(--brand-blue-dark);
}
.ss-modal-foot .ss-modal-confirm.is-danger {
  border-color: var(--danger);
  background: var(--danger);
}
.ss-modal-foot .ss-modal-confirm.is-danger:hover:not(:disabled) {
  background: var(--danger-dark);
  border-color: var(--danger-dark);
}

/* 表单字段（demo security.css:52-62） */
.ss-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ss-field label {
  color: var(--text-main);
  font-size: var(--fs-13);
  font-weight: 700;
}
.ss-field input,
.ss-field select {
  /* 原生 input 默认 content-box：width:100% 还要再加 24px 内距 + 2px 边框，
     在弹窗里会横向顶出 26px（实测 440 宽的弹窗里输入框 426 宽） */
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--card-border);
  outline: none;
  background: var(--surface);
  color: var(--text-main);
  font: inherit;
  font-size: var(--fs-13);
}
.ss-field input:focus,
.ss-field select:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--brand-blue-tint-08);
}
.ss-field input:disabled {
  background: var(--surface-muted);
  color: var(--text-5);
}
.ss-pwd-rules {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.ss-pwd-rules li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-12);
  color: var(--text-5);
}
.ss-pwd-rules li i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-strong);
  flex: 0 0 auto;
}
.ss-pwd-rules li.is-pass {
  color: var(--success);
}
.ss-pwd-rules li.is-pass i {
  background: var(--success);
}
.ss-forgot a {
  color: var(--brand-blue);
  margin-left: 4px;
}

.ss-field-tip {
  color: var(--text-5);
  font-size: var(--fs-12);
  line-height: var(--lh-copy-lg);
}
.ss-field-row {
  display: flex;
  gap: 10px;
}
.ss-field-row input {
  flex: 1;
}
.ss-field-row button {
  width: 110px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--card-border);
  background: var(--surface);
  color: var(--text-3);
  font-size: var(--fs-12);
  font-weight: 600;
  cursor: pointer;
}
.ss-field-row button:hover:not(:disabled) {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}
.ss-field-row button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* 空态：.ss-empty 由 theme-ui.css 统一提供，这里不再重复定义 */

/* ============================================================
   5. 徽标（demo messages-item-cat / security-card-status 同源）
   ============================================================ */
.ss-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--ss-radius-btn);
  font-size: var(--fs-11);
  font-weight: 700;
  white-space: nowrap;
}
.ss-tag--blue {
  background: var(--brand-blue-tint-10);
  color: var(--brand-blue);
}
.ss-tag--green {
  background: rgba(0, 194, 97, 0.1);
  color: var(--success-deep);
}
.ss-tag--violet {
  background: rgba(124, 58, 237, 0.1);
  color: var(--violet);
}
.ss-tag--orange {
  background: rgba(217, 119, 6, 0.1);
  color: var(--warning-dark);
}
.ss-tag--red {
  background: rgba(248, 113, 113, 0.1);
  color: var(--danger);
}
.ss-tag--gray {
  background: var(--accent-tint);
  color: var(--text-5);
}

/* ============================================================
   6. 按钮式 tab（demo messages.css:4-7）
   ============================================================ */
.ss-tabs-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.ss-tab {
  height: 32px;
  padding: 0 14px;
  /* 与按钮同一个圆角令牌：方角 tab 配 14px 圆角的卡片会显得生硬 */
  border-radius: var(--ss-radius-btn);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-5);
  font-size: var(--fs-13);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ss-tab:hover {
  color: var(--text-main);
}
.ss-tab.is-active {
  border-color: var(--brand-blue);
  background: var(--brand-blue-tint-07);
  color: var(--brand-blue);
}
.ss-tab-num {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--danger);
  color: #fff;
  font-size: var(--fs-10);
  font-weight: 700;
  border-radius: 8px;
}

/* ============================================================
   6.5 通用按钮（demo .contracts-btn / .api-apply-btn 同源）
   ============================================================ */
.ss-panel-btn {
  height: 32px;
  padding: 0 16px;
  border: 1px solid var(--brand-blue);
  border-radius: var(--ss-radius-btn);
  background: var(--brand-blue);
  color: #fff;
  font-size: var(--fs-12);
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.ss-panel-btn:hover {
  background: var(--brand-blue-dark);
}
.ss-panel-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* 次要按钮：描边（demo .contracts-btn--detail） */
.ss-panel-btn.is-plain {
  border-color: var(--card-border);
  background: var(--surface);
  color: var(--text-3);
}
.ss-panel-btn.is-plain:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
  background: var(--surface);
}
/* 弹窗底部操作区：全站一处定义。
   原来 common.css 是 46px 高、无圆角，页面主按钮是 40px，弹窗里的按钮明显偏大。 */
.dialog-footer {
  margin-top: var(--space-20);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-12);
}
.dialog-footer .btn-ok,
.dialog-footer .btn-no {
  height: 34px;
  min-width: 88px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ss-radius-btn);
  cursor: pointer;
}
.dialog-footer .btn-ok:disabled,
.dialog-footer .btn-no:disabled {
  cursor: not-allowed;
}

/* 表内文字按钮（demo .contracts-btn--detail 的轻量形态） */
.ss-link-btn {
  border: none;
  background: transparent;
  color: var(--brand-blue);
  font-size: var(--fs-12);
  font-weight: 600;
  cursor: pointer;
  padding: 0 6px;
}
.ss-link-btn.is-danger {
  color: var(--danger);
}
.ss-link-btn:disabled {
  color: var(--text-5);
  cursor: not-allowed;
}

/* ============================================================
   6.5b 工具条控件宽度 / 行内链接 / 数值强调
   以前这些宽度和颜色是逐处 style="width:220px;margin-left:20px" 写死在模板里的，
   同一排控件间距靠 margin 拼，换屏幕就错位。宽度与间距统一收到这里。
   ============================================================ */
.ss-filter {
  width: 220px;
}
.ss-filter--sm {
  width: 120px;
}
.ss-filter--md {
  width: 250px;
}
.ss-filter--lg {
  width: 320px;
}
/* 日期区间：起止两个日期 + 分隔符，比普通下拉需要更宽 */
.ss-filter--xl {
  width: 350px;
}
/* 行内链接文字（原 security-ss.css 里那份已删除，全站只用这一份） */
.ss-link {
  color: var(--brand-blue);
  text-decoration: none;
  cursor: pointer;
}
.ss-link:hover {
  text-decoration: underline;
}
/* 数值强调：金额/数量里的警示色，字号补上 40 档 */
.ss-num-warn {
  color: var(--warning-dark);
  font-size: var(--fs-32);
  font-weight: 800;
  line-height: var(--lh-solid);
}
/* 窄屏：弹窗按钮改为整行、上下排列（原来 account/finance 各抄了一份 80px 高、
   34px 字号的版本，和全站 40px 的按钮完全两个尺度） */
@media (max-width: 750px) {
  .dialog-footer {
    flex-direction: column-reverse;
  }
  .dialog-footer .btn-ok,
  .dialog-footer .btn-no {
    width: 100%;
    height: 44px;
  }
}

@media (max-width: 900px) {
  .ss-filter,
  .ss-filter--md,
  .ss-filter--lg,
  .ss-filter--xl {
    width: 100%;
  }
}

/* 通栏卡片：内部工具条 / 表格 / 分页贴到卡片边缘（demo contracts-list-card） */
.ss-card.ss-card--flush {
  padding: 0;
}

/* ============================================================
   6.6 卡内工具条 + 搜索框（demo contracts-toolbar / invoices-toolbar）
   ============================================================ */
.ss-toolbar {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--divider);
  flex-wrap: wrap;
}
.ss-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ss-search {
  width: 220px;
  height: 34px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  border: 1px solid var(--card-border);
  background: var(--surface);
}
.ss-search:focus-within {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--brand-blue-tint-08);
}
/* .ss-search 是自带边框的容器（对齐 demo .bills-search 的 220×34）。
   页面往里塞 el-input 时，输入框必须退成无边框裸输入——否则容器和输入框各画一道
   边框、高度各按自己算，实测出现过 28.5 / 32 / 38 三种高度。
   这里统一一次，页面不再各写一份补丁。 */
.ss-search .el-input,
.ss-search .el-input__inner {
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--fs-13);
  color: var(--text-main);
}
.ss-search svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--text-5);
}
.ss-search input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-main);
  font: inherit;
  font-size: var(--fs-13);
}

/* ============================================================
   6.7 状态徽标（demo contracts-status / invoices-status：实心 + 白字）
   ============================================================ */
.ss-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 64px;
  padding: 3px 10px;
  /* 圆角收到 6px：胶囊（999px）在小字号下显得过圆，和表格里其它元素不协调 */
  border-radius: 6px;
  font-size: var(--fs-12);
  font-weight: 500;
  white-space: nowrap;
}
.ss-status i {
  font-size: var(--fs-12);
}
.ss-status--wait {
  background: rgba(237, 123, 47, .1);
  color: #ed7b2f;
}
.ss-status--ok {
  background: rgba(0, 168, 112, .1);
  color: #00a870;
}
.ss-status--danger {
  background: rgba(227, 77, 89, .1);
  color: #e34d59;
}
.ss-status--muted {
  background: var(--accent-tint);
  color: var(--text-3);
}

/* ============================================================
   6.8 键值表（详情弹窗用）
   ============================================================ */
.ss-kv {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  margin: 0 0 4px;
}
.ss-kv dt,
.ss-kv dd {
  margin: 0;
  padding: 8px 0;
  font-size: var(--fs-13);
  border-bottom: 1px solid var(--divider);
}
.ss-kv dt {
  color: var(--text-5);
}
.ss-kv dd {
  color: var(--text-main);
  word-break: break-all;
}
.ss-kv dt:last-of-type,
.ss-kv dd:last-of-type {
  border-bottom: none;
}

/* ============================================================
   7. 卡头（卡片本体由 theme-ui.css 的 .ss-card 提供，避免两处定义打架）
   ============================================================ */
.ss-section-head {
  min-height: 54px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--divider);
  flex-wrap: wrap;
}
.ss-section-head h2 {
  font-size: var(--fs-15);
  color: var(--text-main);
}
/* 卡头放在有内距的卡片里时，留白只能算一次：
   .ss-card 自带 20px，.ss-section-head 又带 24px，叠起来标题比正文多缩进 4px、
   整体缩进 44px，视觉上就是「排版歪了」。这里把卡头拉到卡片边缘，
   内距与正文对齐在同一个 20px 上，同时保留分隔线通栏的观感。 */
.ss-card:not(.ss-card--flush) > .ss-section-head {
  margin: calc(var(--space-20) * -1) calc(var(--space-20) * -1) var(--space-20);
  padding: 0 var(--space-20);
}
@media (max-width: 700px) {
  .ss-card:not(.ss-card--flush) > .ss-section-head {
    margin: calc(var(--space-16) * -1) calc(var(--space-16) * -1) var(--space-16);
    padding: 0 var(--space-16);
  }
}

/* ============================================================
   8. 统计块与柱状图（demo api.css:35-55）
   ============================================================ */
.ss-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.ss-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--accent-tint);
  border: 1px solid var(--divider);
  border-radius: var(--ss-radius);
}
.ss-stat-label {
  font-size: var(--fs-12);
  color: var(--text-5);
}
.ss-stat-val {
  font-family: var(--font-numbers);
  font-size: var(--fs-24);
  font-weight: 800;
  color: var(--text-main);
}
.ss-stat-val.is-green {
  color: var(--success-deep);
}
.ss-stat-val.is-red {
  color: var(--danger);
}
.ss-stat-val small {
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-5);
  margin-left: 4px;
}

.ss-chart {
  position: relative;
  height: 200px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 8px 0 24px;
  border-bottom: 1px solid var(--divider);
}
.ss-chart-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
  cursor: pointer;
  position: relative;
}
.ss-chart-bar-fill {
  width: 100%;
  max-width: 28px;
  background: linear-gradient(to top, var(--brand-blue), var(--brand-blue-light));
  transition: opacity 0.12s ease;
}
.ss-chart-bar:hover .ss-chart-bar-fill {
  opacity: 0.8;
}
.ss-chart-bar-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: #1e2030;
  color: #fff;
  font-size: var(--fs-11);
  font-family: var(--font-numbers);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 5;
}
.ss-chart-bar:hover .ss-chart-bar-tip {
  opacity: 1;
}
.ss-chart-labels {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.ss-chart-label {
  flex: 1;
  text-align: center;
  font-size: var(--fs-10);
  color: var(--text-5);
  font-family: var(--font-numbers);
}

/* ============================================================
   9. 开关（demo api.css:7-14）
   ============================================================ */
.ss-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.ss-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ss-switch-slider {
  width: 38px;
  height: 20px;
  background: var(--gray-3, #d1d5db);
  border-radius: var(--ss-radius-round);
  position: relative;
  transition: background 0.18s ease;
}
.ss-switch-slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.ss-switch input:checked + .ss-switch-slider {
  background: var(--brand-blue);
}
.ss-switch input:checked + .ss-switch-slider::after {
  transform: translateX(18px);
}
.ss-switch-label {
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-3);
}
:root[data-theme="dark"] .ss-switch-slider {
  background: #2e3040;
}

/* ============================================================
   10. 响应式
   ============================================================ */
@media (max-width: 1200px) {
  .ss-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .ss-modal {
    width: calc(100% - 24px);
  }
  .ss-pager {
    flex-wrap: wrap;
    gap: 10px;
  }
  .ss-tabs-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .ss-chart {
    height: 160px;
    gap: 3px;
  }
  .ss-chart-bar-fill {
    max-width: 18px;
  }
  .ss-stat-val {
    font-size: var(--fs-20);
  }
}

/* ============================================================
   6.9 资讯/公告/资源中心共享组件（对齐 demo news.css / help.css）
   ------------------------------------------------------------
   公告、资源中心、帮助中心三页以前各带一份 .ss-cat / .ss-empty /
   .ss-search 私有定义，同一控件三种尺寸。统一收编到这里：
   - .ss-cat        左侧分类项（公告/资源中心左栏）
   - .ss-list-head  列表头（当前分类名 + 计数）
   - .ss-news-item  资讯列表项（日期块 + 标题 + 元信息，demo news-item 同构）
   - .ss-empty      覆盖 theme-ui 的基础空态为 demo 的 60px 形态
   - .ss-search--lg 大号搜索框（帮助中心 hero 用，520px）
   ============================================================ */

/* 左侧分类项（demo 无独立组件，按 demo 分隔线/选中态/计数徽标规范拼装） */
.ss-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--ss-radius-btn);
  cursor: pointer;
  user-select: none;
  font-size: var(--fs-14);
  color: var(--text-3);
  transition: background var(--motion-mid), color var(--motion-mid);
}
.ss-cat + .ss-cat {
  margin-top: 2px;
}
.ss-cat:hover {
  background: var(--accent-tint);
  color: var(--text-main);
}
.ss-cat.is-active {
  background: var(--brand-blue-tint-08);
  color: var(--brand-blue);
  font-weight: 600;
}
.ss-cat-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ss-cat-num {
  flex: none;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--ss-radius-round);
  background: var(--accent-tint);
  color: var(--text-5);
  font-size: var(--fs-11);
  font-weight: 400;
  line-height: 18px;
  text-align: center;
  transition: background var(--motion-mid), color var(--motion-mid);
}
.ss-cat.is-active .ss-cat-num {
  background: var(--brand-blue);
  color: #fff;
}

/* 列表头：当前分类 + 计数（demo news-item-head 的列表级形态） */
.ss-list-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--divider);
}
.ss-list-head-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--text-main);
}
.ss-list-head-count {
  flex: none;
  font-size: var(--fs-13);
  color: var(--text-5);
}
.ss-list-head .ss-search {
  margin-left: auto;
}

/* 资讯列表项（demo .news-item：标题 + 日期元信息 + 悬停揭示箭头） */
.ss-news-item {
  display: flex;
  align-items: center;
  gap: 16px;
  /* 左右 0：标题与列表头（.ss-list-head）左对齐。
     demo 的 20px 24px 是按通栏列表给的，这里列表在左栏右侧，横向再缩进会错位。 */
  padding: 16px 0;
  border-bottom: 1px solid var(--divider);
  cursor: pointer;
  transition: background var(--motion-mid);
}
.ss-news-item:last-child {
  border-bottom: none;
}
.ss-news-item:hover {
  background: var(--accent-tint);
}
.ss-news-item:hover .ss-news-title {
  color: var(--brand-blue);
}
.ss-news-item:hover .ss-news-arrow {
  opacity: 1;
  transform: translateX(2px);
}
.ss-news-main {
  flex: 1;
  min-width: 0;
}
.ss-news-title {
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--text-main);
  line-height: var(--lh-copy, 1.6);
  transition: color var(--motion-mid);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.ss-news-meta {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-12);
  color: var(--text-5);
}
.ss-news-arrow {
  flex: none;
  color: var(--text-5);
  opacity: 0;
  transition: opacity var(--motion-mid), transform var(--motion-mid);
}

/* 空态统一为 demo 形态（60px 内距、图标 + 文案） */
.ss-empty {
  padding: 60px 0;
  text-align: center;
  color: var(--text-5);
  font-size: var(--fs-13);
}
.ss-empty i {
  display: block;
  font-size: var(--fs-36);
  margin-bottom: 10px;
  color: var(--card-border);
}
.ss-empty p {
  margin: 0;
}

/* 大号搜索框：帮助中心 hero 用（demo .help-search 520px，落回共享尺度） */
.ss-search--lg {
  width: 320px;
}
@media (max-width: 900px) {
  .ss-search--lg {
    width: 100%;
  }
}

/* ============================================================
   13. 卡片 / 卡头 / 表格：唯一来源
   ------------------------------------------------------------
   首页那套 cy-* 原本写在 home.css 里，会员中心的 ss-* 又各写一份，
   于是「同一个卡片」在两个文件里各有一套圆角、阴影、字号——首页改一次，
   会员中心不会跟着变。这里收口成一份定义，两个命名共用同一组规则：
     .ss-card  ∪ .cy-card
     .ss-section-head ∪ .cy-head
     .ss-table ∪ .cy-table
   cy-* 保留为兼容别名（首页模板仍在用），新页面一律写 ss-*。
   ============================================================ */

/* ---- 卡片本体 ---- */
.ss-card,
.cy-card {
  position: relative;
  min-width: 0;
  border-radius: 14px;
  background: var(--surface);
  /* 投影取 --shadow-card（主色染色的极轻双层）。卡片本身不染色，仍是近白；
     染的是它周围的空气——这样才和淡蓝侧栏处在同一束光下。 */
  box-shadow: var(--shadow-card);
  /* 必须裁切：内部表头/表格贴着卡片边缘，不裁会方角溢出圆角 */
  overflow: hidden;
}
.ss-card > *,
.cy-card > * {
  position: relative;
  z-index: 1;
}
.ss-card-body,
.cy-card-body {
  padding: 20px 24px;
}
/* 强调色：卡内的标签底色、表格悬停、数值色都读 --accent */
.ss-card--accent-green, .cy-card--accent-green { --accent: var(--success); }
.ss-card--accent-blue, .cy-card--accent-blue { --accent: var(--brand-blue); }
.ss-card--accent-violet, .cy-card--accent-violet { --accent: var(--violet); }
.ss-card--accent-amber, .cy-card--accent-amber { --accent: var(--warning); }
.ss-card--accent-purple, .cy-card--accent-purple { --accent: var(--purple-deep); }

/* ---- 卡头 ----
   两种落位，同一份排版：
   ① 直接放在卡片里（卡头 + 通栏表格）→ 自带内距 + 分隔线，卡内是一条通栏标题栏
   ② 放在 .ss-card-body 里（首页那种）→ 去掉内距和分隔线，跟正文同一条基准线 */
.ss-section-head,
.cy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  flex-wrap: wrap;
  min-height: 0;
}
.ss-section-head h2,
.ss-section-head h3,
.cy-head h3 {
  margin: 0;
  font-size: var(--fs-15);
  font-weight: 800;
  line-height: 1.35;
  color: var(--text-main);
}
.ss-card > .ss-section-head {
  padding: 16px 24px;
  margin: 0;
  border-bottom: 1px solid var(--divider);
}
.ss-card-body > .ss-section-head,
.cy-head {
  padding: 0;
  margin: 0 0 14px;
  border-bottom: 0;
}
/* 旧的负边距补丁作废：那时候是为了把卡头拉到卡片边缘，现在由上面两条按落位处理 */
.ss-card:not(.ss-card--flush) > .ss-section-head {
  margin: 0;
  padding: 16px 24px;
}

/* ---- 卡头右侧的小标记（首页 .cy-tag 那枚等宽描边胶囊） ----
   与 .ss-tag（状态色块）是两种东西：这个是「分区标记」，纯装饰；
   那个是「状态」，要能一眼分辨红绿。所以不合并。 */
.ss-eyebrow,
.cy-tag {
  padding: 3px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-5);
  border: 1px solid var(--card-border);
  background: var(--accent-tint);
  white-space: nowrap;
}

/* ---- 手写表格（首页资源列表那一套） ---- */
.ss-table,
.cy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-13);
}
.ss-table th,
.cy-table th {
  padding: 10px var(--space-12);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  color: var(--text-5);
  border-bottom: 1px solid var(--border);
  background: var(--accent-tint);
}
.ss-table td,
.cy-table td {
  padding: 10px var(--space-12);
  border-bottom: 1px solid var(--divider);
  font-size: var(--fs-13);
  color: var(--text-2);
  vertical-align: middle;
}
.ss-table tbody tr,
.cy-table tbody tr {
  transition: background var(--motion-fast);
}
.ss-table tbody tr:hover,
.cy-table tbody tr:hover {
  background: var(--accent-tint);
}
.ss-table tbody tr:last-child td,
.cy-table tbody tr:last-child td {
  border-bottom: none;
}

/* ============================================================
   14. 统计块：首页卡片的语言
   ------------------------------------------------------------
   原来每个页面各写一份（productList.css 用 .ss-stat-item，
   finance/security 又各自一套），圆角、描边、字号都不一致。
   这里收口成一份：与卡片同一套圆角 14 / 表面色 / 染色投影，
   不再用 1px 描边——描边卡片在淡蓝底色上会显得"贴上去"。
   两个历史命名都认：.ss-stat-value（新）/ .ss-stat-val（旧）。
   ============================================================ */
.ss-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  /* 与页头、下方表格卡之间的竖向节奏一致 */
  margin-bottom: 16px;
}
.ss-stat-item,
.ss-stat {
  position: relative;
  padding: 18px 20px;
  background: var(--surface);
  border: 0;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--motion-fast), transform var(--motion-fast);
}
.ss-stat-item:hover,
.ss-stat:hover {
  transform: translateY(-1px);
}
.ss-stat-item.is-active {
  box-shadow: var(--shadow-card), inset 0 0 0 1px var(--accent, var(--brand-blue));
}
.ss-stat-value,
.ss-stat-val {
  font-family: var(--font-numbers);
  font-size: var(--fs-28);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.5px;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}
.ss-stat-label {
  margin-top: 6px;
  font-size: var(--fs-12);
  color: var(--text-4);
}
/* 旧版的左侧 3px 色条：首页语言里没有这个元素，统一去掉。
   状态靠数字上方的语义色小字/图标表达，不靠一条贴边的色条。 */
.ss-stat-item::before {
  content: none;
}
@media (max-width: 900px) {
  .ss-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   修复：弹窗确认按钮文字被 .ss-modal-foot button 的灰色覆盖
   .ss-modal-foot button（0,1,1）特异性高于 .ss-modal-confirm（0,1,0），
   导致蓝底上渲染灰字，可读性差。
   ============================================================ */
.ss-modal-foot .ss-modal-confirm {
  color: #fff;
}
.ss-modal-foot .ss-modal-confirm.is-danger {
  color: #fff;
}

/* ============================================================
   状态徽标：小圆角块，不加前置圆点
   原来这里是 999px 胶囊 + currentColor 圆点，图标本身已经表达状态，
   圆点属于重复语义，去掉；圆角收小到 6px。
   ============================================================ */
.ss-status {
  border-radius: 6px;
  padding: 3px 10px;
}