@charset "UTF-8";
/* =============================================================================
   hebang-atoms.css —— 原子组件样式

   只消费 token，不写字面量取值。组件若自带一套颜色，客户换主题色时就要逐个组件改。
   每个组件的可访问性约束写在对应区块的第一行，改动前先读那一行。
   ============================================================================= */

/* --- 图标 --- */

.hebang-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex-shrink: 0;
  font-size: 1em;
  vertical-align: middle;
}

/* --- 按钮 --- */

/*
 * 主色按钮上的文字必须用 --hebang-color-primary-ink：白字置于主色低于 4.5:1。
 */
.hebang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hebang-space-2);
  min-height: var(--hebang-control-h);
  padding: 0 var(--hebang-space-7);
  border: var(--hebang-border-width) solid transparent;
  border-radius: var(--hebang-radius);
  background: transparent;
  color: var(--hebang-color-ink);
  font-family: var(--hebang-font-sans);
  font-size: var(--hebang-fs-15);
  font-weight: var(--hebang-weight-semibold);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: var(--hebang-transition-fast);
}

.hebang-btn .hebang-icon {
  font-size: 1.15em;
}

.hebang-btn-primary {
  background: var(--hebang-color-primary);
  color: var(--hebang-color-primary-ink);
}

.hebang-btn-primary:hover,
.hebang-btn-primary:focus {
  background: var(--hebang-color-primary-hover);
  color: var(--hebang-color-primary-ink);
}

.hebang-btn-primary-text {
  border-color: var(--hebang-color-primary-text);
  color: var(--hebang-color-primary-text);
}

.hebang-btn-primary-text:hover,
.hebang-btn-primary-text:focus {
  background: var(--hebang-color-primary-text);
  color: var(--hebang-color-white);
}

.hebang-btn-outline {
  border-color: var(--hebang-color-border-input);
  color: var(--hebang-color-ink);
}

.hebang-btn-outline:hover,
.hebang-btn-outline:focus {
  border-color: var(--hebang-color-ink);
  background: var(--hebang-color-surface-mute);
  color: var(--hebang-color-ink);
}

.hebang-btn-ghost {
  color: var(--hebang-color-ink);
}

.hebang-btn-ghost:hover,
.hebang-btn-ghost:focus {
  background: var(--hebang-color-surface-soft);
  color: var(--hebang-color-ink);
}

.hebang-btn-dark {
  background: var(--hebang-color-primary-dark);
  color: var(--hebang-color-white);
}

.hebang-btn-dark:hover,
.hebang-btn-dark:focus {
  background: var(--hebang-color-primary-deep);
  color: var(--hebang-color-white);
}

.hebang-btn-link {
  min-height: 0;
  padding: 0;
  border: 0;
  color: var(--hebang-color-primary-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hebang-btn-link:hover,
.hebang-btn-link:focus {
  color: var(--hebang-color-ink);
}

.hebang-btn-sm {
  min-height: var(--hebang-control-h-sm);
  padding: 0 var(--hebang-space-6);
  font-size: var(--hebang-fs-14);
}

.hebang-btn-lg {
  min-height: var(--hebang-control-h-lg);
  padding: 0 var(--hebang-space-8);
  font-size: var(--hebang-fs-17);
}

.hebang-btn-block {
  display: flex;
  width: 100%;
}

@media (width < 768px) {
  .hebang-btn-primary {
    min-height: var(--hebang-mobile-control-h);
    width: 100%;
    line-height: var(--hebang-lh-base);
    padding-block: var(--hebang-space-3);
  }
}

/* 禁用态用 surface_mute 配常规文字色：该组合满足 AA 正文对比度，降透明度会让它掉到读不出的程度 */
.hebang-btn.is_disabled,
.hebang-btn[disabled],
.hebang-btn[aria-disabled="true"] {
  background: var(--hebang-color-surface-mute);
  border-color: transparent;
  color: var(--hebang-color-text);
  cursor: not-allowed;
}

.hebang-btn.is_disabled:hover,
.hebang-btn[disabled]:hover,
.hebang-btn[aria-disabled="true"]:hover {
  background: var(--hebang-color-surface-mute);
  color: var(--hebang-color-text);
}

/* 填色与双箭头共用交互状态；内容层覆盖填色，禁用态不响应位移。 */
.hebang-btn-motion {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --hebang-btn-base: transparent;
  --hebang-btn-fill: var(--hebang-color-surface-mute);
}

.hebang-btn-motion.hebang-btn-primary {
  --hebang-btn-base: var(--hebang-color-primary);
  --hebang-btn-fill: var(--hebang-color-primary-hover);
}

.hebang-btn-motion.hebang-btn-primary-text {
  --hebang-btn-fill: var(--hebang-color-primary-text);
}

.hebang-btn-motion.hebang-btn-dark {
  --hebang-btn-base: var(--hebang-color-primary-dark);
  --hebang-btn-fill: var(--hebang-color-primary-deep);
}

.hebang-btn-motion.hebang-btn:is(:hover, :focus-visible):not(:disabled, .is_disabled, [aria-disabled="true"]) {
  background-color: var(--hebang-btn-base);
}

.hebang-btn-content {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hebang-space-2);
}

.hebang-btn-motion::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--hebang-btn-fill);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
  pointer-events: none;
}

.hebang-btn .hebang-btn-arrow {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  overflow: hidden;
  width: 18px;
  height: 18px;
}

.hebang-btn .hebang-btn-arrow > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: currentColor;
  transition: transform 0.3s ease;
}

.hebang-btn .hebang-btn-arrow > :nth-child(2) {
  transform: translateX(-150%);
}

.hebang-btn-motion:is(:hover, :focus-visible):not(:disabled, .is_disabled, [aria-disabled="true"])::before {
  transform: translateX(0);
}

.hebang-btn-motion:is(:hover, :focus-visible):not(:disabled, .is_disabled, [aria-disabled="true"]) .hebang-btn-arrow > :first-child {
  transform: translateX(150%);
}

.hebang-btn-motion:is(:hover, :focus-visible):not(:disabled, .is_disabled, [aria-disabled="true"]) .hebang-btn-arrow > :nth-child(2) {
  transform: translateX(0);
}

.hebang-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* 减少动态效果时保留静态状态反馈，箭头不作接替。 */
@media (prefers-reduced-motion: reduce) {
  .hebang-btn-motion,
  .hebang-btn-motion::before,
  .hebang-btn .hebang-btn-arrow > * {
    transition: none;
  }

  .hebang-btn-motion:is(:hover, :focus-visible) .hebang-btn-arrow > :first-child {
    transform: none;
  }

  .hebang-btn .hebang-btn-arrow > :nth-child(2) {
    display: none;
  }
}

/* --- 标签 --- */

/*
 * 状态含义必须写在文字里，不能仅依靠颜色表达。
 */
.hebang-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--hebang-space-1);
  padding: 3px var(--hebang-space-3);
  border-radius: var(--hebang-radius-sm);
  background: var(--hebang-color-surface-soft);
  color: var(--hebang-color-text);
  font-size: var(--hebang-fs-13);
  font-weight: var(--hebang-weight-semibold);
  line-height: 1.6;
  white-space: nowrap;
}

.hebang-tag-sm {
  padding: 1px var(--hebang-space-2);
  font-size: var(--hebang-fs-12);
}

.hebang-tag-primary {
  background: var(--hebang-color-primary-tint);
  color: var(--hebang-color-primary-text);
}

.hebang-tag-success {
  background: var(--hebang-color-success-surface);
  color: var(--hebang-color-success-text);
}

.hebang-tag-warning {
  background: var(--hebang-color-warning-surface);
  color: var(--hebang-color-warning-text);
}

.hebang-tag-danger {
  background: var(--hebang-color-danger-surface);
  color: var(--hebang-color-danger-text);
}

.hebang-tag-muted {
  background: var(--hebang-color-surface-mute);
  color: var(--hebang-color-text);
}

.hebang-tag-label {
  display: inline-block;
}

a.hebang-tag:hover,
a.hebang-tag:focus {
  box-shadow: var(--hebang-shadow-sm);
  color: var(--hebang-color-ink);
}

/* --- 空状态 --- */

/*
 * 空状态必须给出下一步，因此 action 区域是结构的一部分而不是可选装饰。
 * title 承担可访问名称，不可省略。
 */
.hebang-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hebang-space-3);
  padding: var(--hebang-space-10) var(--hebang-space-6);
  border: var(--hebang-border-width) dashed var(--hebang-color-border-strong);
  border-radius: var(--hebang-radius-md);
  background: var(--hebang-color-surface-alt);
  text-align: center;
}

.hebang-empty-icon {
  display: block;
  color: var(--hebang-color-muted);
  font-size: var(--hebang-fs-40);
  line-height: 1;
}

.hebang-empty-title {
  margin: 0;
  color: var(--hebang-color-ink);
  font-size: var(--hebang-fs-h5);
  font-weight: var(--hebang-weight-semibold);
  line-height: var(--hebang-lh-snug);
}

.hebang-empty-desc {
  max-width: 46ch;
  margin: 0;
  color: var(--hebang-color-text);
  font-size: var(--hebang-fs-body-sm);
}

.hebang-empty-action {
  margin-top: var(--hebang-space-3);
}

.hebang-empty-illustrated {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  min-height: 300px;
  padding: clamp(28px, 4vw, 56px);
  border-style: solid;
  border-color: var(--hebang-color-border);
  background: var(--hebang-color-surface-alt);
  text-align: left;
}

.hebang-empty-illustrated .hebang-empty-content {
  min-width: 0;
}

.hebang-empty-illustrated .hebang-empty-title {
  font-size: clamp(24px, 2.7vw, 38px);
}

.hebang-empty-illustrated .hebang-empty-desc {
  margin-top: var(--hebang-space-3);
}

.hebang-empty-illustrated .hebang-empty-action {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hebang-space-3);
}

.hebang-empty-illustration {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  justify-self: end;
}

@media (max-width: 680px) {
  .hebang-empty-illustrated {
    grid-template-columns: minmax(0, 1fr);
  }

  .hebang-empty-illustration {
    width: min(100%, 280px);
    justify-self: center;
  }
}

.hebang-empty-error {
  border-style: solid;
  border-color: var(--hebang-color-danger-text);
  background: var(--hebang-color-danger-surface);
}

.hebang-empty-error .hebang-empty-icon,
.hebang-empty-error .hebang-empty-title {
  color: var(--hebang-color-danger-text);
}

/* --- 模态框 --- */

/*
 * 对话框默认 hidden，由 JS 在打开时移除。
 * 只靠透明度或位移隐藏会让隐藏内容继续进入 Tab 顺序。
 */
.hebang-modal {
  position: fixed;
  inset: 0;
  z-index: var(--hebang-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--hebang-space-6);
}

.hebang-modal[hidden] {
  display: none;
}

.hebang-modal-overlay {
  position: absolute;
  inset: 0;
  background: var(--hebang-color-overlay);
}

.hebang-modal-dialog {
  position: relative;
  z-index: var(--hebang-z-raised);
  width: 100%;
  max-height: calc(100vh - var(--hebang-space-12));
  overflow-y: auto;
  padding: var(--hebang-space-8);
  border-radius: var(--hebang-radius-md);
  background: var(--hebang-color-surface);
  box-shadow: var(--hebang-shadow-lg);
}

.hebang-modal-sm .hebang-modal-dialog { max-width: 480px; }
.hebang-modal-md .hebang-modal-dialog { max-width: 640px; }
.hebang-modal-lg .hebang-modal-dialog { max-width: 900px; }

.hebang-modal-title {
  margin: 0 var(--hebang-space-10) var(--hebang-space-5) 0;
  font-size: var(--hebang-fs-h4);
  line-height: var(--hebang-lh-snug);
}

.hebang-modal-close {
  position: absolute;
  top: var(--hebang-space-5);
  right: var(--hebang-space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hebang-hit-min);
  height: var(--hebang-hit-min);
  padding: 0;
  border: 0;
  border-radius: var(--hebang-radius-circle);
  background: transparent;
  color: var(--hebang-color-ink);
  font-size: var(--hebang-fs-22);
  cursor: pointer;
  transition: var(--hebang-transition-fast);
}

.hebang-modal-close:hover,
.hebang-modal-close:focus {
  background: var(--hebang-color-surface-soft);
}

.hebang-modal-body {
  color: var(--hebang-color-text);
}

.hebang-modal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--hebang-space-3);
  margin-top: var(--hebang-space-7);
  padding-top: var(--hebang-space-6);
  border-top: var(--hebang-border);
}

/* 打开模态时锁滚动。加到 html 而不是 body：body 上的 overflow 在 iOS Safari 不生效 */
html.hebang-modal-open {
  overflow: hidden;
}

/* --- 波浪分隔 --- */

/*
 * 顶部白色波浪：svg 宽为容器三倍并水平居中，只露出中间一段，
 * 容器高度因此由 svg 自身的视图比例决定，既不能用固定高度，也不能被基础层的 max-width 收窄。
 */
.hebang-wave-divider {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  overflow: hidden;
  direction: ltr;
  line-height: 0;
}

.hebang-wave-divider svg {
  position: relative;
  left: 50%;
  display: block;
  width: calc(300% + 1.3px);
  max-width: none;
  transform: translateX(-50%);
}

.hebang-wave-divider-fill {
  fill: var(--hebang-color-white);
}