/* 通用组件样式：首页所需组件（按钮/输入/上传框/分隔线/链接）；取值一律来自 tokens.css 或 pages.css 的几何变量 */

/* ========== 主按钮 ========== */
.btn-primary {
  width: var(--btn-w);
  height: var(--btn-h);
  font-family: var(--font-kai);
  font-size: var(--fs-4);
  letter-spacing: 0.3em;
  text-indent: 0.3em; /* 抵消末字 letter-spacing，保证"译"字视觉居中 */
  background: transparent;
  color: var(--color-gold);
  border: var(--hairline) solid var(--color-gold);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}

.btn-primary:hover {
  background: var(--color-gold);
  color: var(--color-bg);
  box-shadow: var(--shadow-gold);
}

.btn-primary:focus-visible {
  outline: none;
  box-shadow: var(--shadow-gold);
}

/* ========== 文字输入 ========== */
#text-input {
  display: block;
  width: 100%;
  height: var(--field-h);
  padding: var(--space-3);
  background: var(--color-bg-card);
  border: var(--hairline) solid var(--color-gold-dim);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: var(--font-song);
  font-size: var(--fs-2);
  line-height: 1.8;
  /* 高度由布局固定，放开拖拽手柄会让"一屏收尽"失效 */
  resize: none;
  transition:
    border-color var(--dur-fast) ease,
    background-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}

#text-input::placeholder {
  color: var(--color-text-ghost);
}

#text-input:hover {
  border-color: var(--color-border-glow);
  background: var(--color-bg-elevated);
}

#text-input:focus {
  border-color: var(--color-gold);
  outline: none;
  box-shadow: var(--shadow-gold);
}

/* ========== 上传区 ========== */
.upload-area {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--upload-h);
  padding: var(--space-5);
  background: var(--color-bg-card);
  border: var(--frame) dashed var(--color-gold-soft);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition:
    border-color var(--dur-mid) ease,
    background-color var(--dur-mid) ease,
    box-shadow var(--dur-mid) ease;
}

.upload-area:hover {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-gold);
}

/* 拖拽态：背景提亮一档，比悬停更明确地回应"可以放下了" */
.upload-area.dragover {
  border-color: var(--color-gold);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-gold);
}

/* 该区块用 tabindex 承担按钮语义，键盘焦点须可见 */
.upload-area:focus-visible {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: var(--shadow-gold);
}

.upload-inner {
  text-align: center;
}

.upload-text {
  font-family: var(--font-kai);
  font-size: var(--fs-5);
  color: var(--color-text);
  margin: 0;
  letter-spacing: 0.1em;
}

.upload-sub {
  font-family: var(--font-ui);
  font-size: var(--fs-3);
  color: var(--color-text-dim);
  margin: var(--space-2) 0 0 0;
  letter-spacing: 0.15em;
}

/* ========== "或"分隔线 ========== */
.or-rule {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  color: var(--color-text-ghost);
}

.or-rule::before,
.or-rule::after {
  content: '';
  flex: 1;
  height: var(--hairline);
  background: linear-gradient(90deg, transparent, var(--color-border-subtle), transparent);
}

.or-rule-label {
  font-family: var(--font-kai);
  font-size: var(--fs-3);
  color: var(--color-text-ghost);
  letter-spacing: normal;
}

/* ========== 作品集入口（圆角按钮） ========== */
.gallery-link {
  display: inline-block;
  font-family: var(--font-kai);
  font-size: var(--fs-3);
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--color-gold-soft);
  padding: var(--space-2) var(--space-4);
  border: var(--hairline) solid var(--color-gold-soft);
  border-radius: var(--radius-md);
  transition:
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    text-shadow var(--dur-fast) ease;
}

.gallery-link:hover {
  background: var(--color-gold-dim);
  border-color: var(--color-gold);
  color: var(--color-gold);
  text-shadow: var(--shadow-gold);
}