/* ================================================================
   ui-kit.css —— 通用零件库（按钮 / 进度条 / 选项卡 / 卡片）
   ----------------------------------------------------------------
   这些样式在问卷、计划页、打卡页里反复用，所以单独放一个文件。
   核心是多邻国的两个手法：
     1. 按钮下方一条 4px 的深色实心边，按下去时按钮下沉、厚边消失
        —— 制造"真的被按下去了"的手感
     2. 卡片一律 2px 浅灰描边 + 大圆角，不用模糊阴影
   想改什么：
     · 按钮按下去沉多少 → 改 .btn:active 里的 translateY
     · 厚边多厚         → 改 .btn 里的 0 4px 0
   ================================================================ */

/* ===================== 一、按钮 ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-m);
  font-size: var(--fs-m);
  font-weight: 800;
  letter-spacing: .2px;
  color: #fff;
  background: var(--brand);
  box-shadow: 0 4px 0 var(--brand-edge);   /* ★ 厚边（多邻国的灵魂） */
  transition: transform .06s linear, box-shadow .06s linear, filter .12s ease;
  white-space: nowrap;
  user-select: none;
}
.btn:hover  { filter: brightness(1.05); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--brand-edge); }

.btn:disabled {
  background: var(--line);
  color: var(--ink-3);
  box-shadow: 0 4px 0 var(--line-2);
  cursor: not-allowed;
  filter: none;
  transform: none;
}

/* 次级按钮：白底黑字（问卷里的"稍后再说"这种） */
.btn-ghost {
  background: var(--card);
  color: var(--ink-2);
  box-shadow: 0 4px 0 var(--line);
  border: 2px solid var(--line);
  padding: 10px 20px;
}
.btn-ghost:hover { background: var(--card-2); color: var(--ink); filter: none; }
.btn-ghost:active { box-shadow: 0 0 0 var(--line); }

.btn-ok   { background: var(--ok);   box-shadow: 0 4px 0 var(--ok-edge); }
.btn-ok:active { box-shadow: 0 0 0 var(--ok-edge); }
.btn-blue { background: var(--blue); box-shadow: 0 4px 0 var(--blue-edge); }
.btn-blue:active { box-shadow: 0 0 0 var(--blue-edge); }

/* 小号 / 通栏 / 方图标按钮 */
.btn-sm     { padding: 8px 14px; font-size: var(--fs-s); border-radius: var(--r-s); box-shadow: 0 3px 0 var(--line); }
.btn-block  { width: 100%; }
.icon-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-s);
  color: var(--ink-2);
  font-size: 20px; font-weight: 700;
  transition: background .12s ease;
}
.icon-btn:hover { background: var(--card-2); color: var(--ink); }

/* ===================== 二、进度条 ===================== */
.bar {
  position: relative;
  height: 16px;
  background: var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ok);
  border-radius: var(--r-pill);
  transition: width .35s cubic-bezier(.34, 1.3, .64, 1);
}
/* 顶部那道白色高光，多邻国进度条的灵魂细节 */
.bar > i::after {
  content: '';
  display: block;
  height: 5px;
  margin: 3px 7px 0;
  background: rgba(255, 255, 255, .45);
  border-radius: var(--r-pill);
}
.bar.is-brand > i { background: var(--brand); }
.bar.is-blue  > i { background: var(--blue); }

/* ===================== 三、标签（小圆角片） ===================== */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 800;
  background: var(--bg-2);
  color: var(--ink-2);
}
.chip-brand  { background: var(--brand-soft);  color: var(--brand-deep); }
.chip-ok     { background: var(--ok-soft);     color: var(--ok-deep); }
.chip-blue   { background: var(--blue-soft);   color: var(--blue-deep); }
.chip-purple { background: var(--purple-soft); color: var(--purple-deep); }
.chip-coral  { background: var(--coral-soft);  color: var(--coral-deep); }

/* ===================== 四、卡片 ===================== */
.card {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--r-l);
  padding: 20px;
}
.card-tight { padding: 14px 16px; border-radius: var(--r-m); }

.card-title {
  font-size: var(--fs-m);
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}

/* 圆角方形图标底（多邻国到处在用的小色块） */
.tile {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800;
  color: #fff;
  background: var(--brand);
}
.tile-sm { width: 34px; height: 34px; border-radius: 11px; font-size: 16px; }
.tile-purple { background: var(--purple); }
.tile-blue   { background: var(--blue); }
.tile-ok     { background: var(--ok); }
.tile-coral  { background: var(--coral); }
.tile-soft   { background: var(--brand-soft); color: var(--brand-deep); }

/* ===================== 五、选项卡（问卷里那种大选项） ===================== */
.options { display: flex; flex-direction: column; gap: 12px; }
.options.is-grid { display: grid; grid-template-columns: 1fr 1fr; }

.option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  text-align: left;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: 0 4px 0 var(--line);
  color: var(--ink);
  font-size: var(--fs-m);
  font-weight: 700;
  transition: transform .06s linear, box-shadow .06s linear,
              border-color .12s ease, background .12s ease;
}
.option:hover  { background: var(--card-2); }
.option:active { transform: translateY(4px); box-shadow: 0 0 0 var(--line); }

/* 选中态：橙色描边 + 浅橙底 + 橙色厚边 */
.option.is-selected {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-deep);
  box-shadow: 0 4px 0 var(--brand);
}
.option.is-selected .option-key {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* 选项左边那个小方块（单选显示字母，多选显示对勾） */
.option-key {
  width: 26px; height: 26px;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  border: 2px solid var(--line);
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--ink-3);
  background: var(--card);
}
.option-main { flex: 1; min-width: 0; }
.option-tip  { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--ink-3); margin-top: 2px; }
.option.is-selected .option-tip { color: var(--brand-edge); }

/* ===================== 六、数字步进器（计划页调时长用） ===================== */
.stepper { display: inline-flex; align-items: center; gap: 8px; }
.stepper-btn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-s);
  border: 2px solid var(--line);
  background: var(--card);
  color: var(--ink-2);
  font-size: 18px; font-weight: 800;
  box-shadow: 0 3px 0 var(--line);
  transition: transform .06s linear, box-shadow .06s linear, background .12s;
}
.stepper-btn:hover { background: var(--card-2); color: var(--ink); }
.stepper-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }
.stepper-btn:disabled { color: var(--line-2); box-shadow: 0 3px 0 var(--line); cursor: not-allowed; }
.stepper-num {
  min-width: 62px;
  text-align: center;
  font-size: var(--fs-m);
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ===================== 七、输入框 ===================== */
.field {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-m);
  border: 2px solid var(--line);
  background: var(--card);
  font-size: var(--fs-m);
  font-weight: 700;
  color: var(--ink);
  outline: none;
  transition: border-color .12s ease;
}
.field:focus { border-color: var(--brand); }
.field::placeholder { color: var(--ink-3); font-weight: 500; }