/* ==========================================================================
   组件类 · 2026-10-07
   🔴 来源：结构参考 Uiverse（MIT，社区投稿），配色与实现全部重写为本品牌令牌。
      ⚠️ 不直接搬 Uiverse 代码 —— 那是炫技风（玻璃拟态/霓虹/3D），
         与「文艺范学士风」冲突。这里只借它的**信息分层结构**。
   参考：
      Cards/0xnihilism_average-mole-62.html   （card / banner / title / form 分层）
      Forms/3bdel3ziz-T_helpless-wasp-32.html
      Inputs/1osm_pretty-frog-15.html         （输入框 + 尾部动作）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 卡片 .sm-card
   -------------------------------------------------------------------------- */
.sm-card{
  position: relative;
  background: var(--brand-paper, #FBF4E9);
  border: 1px solid var(--brand-rule, #DED5C4);
  border-radius: var(--radius-lg, 12px);
  padding: var(--sp-5, 24px);
  box-shadow: var(--shadow-1, 0 1px 3px rgba(21,42,33,.06));
  transition: box-shadow .2s cubic-bezier(.16,1,.3,1),
              transform   .2s cubic-bezier(.16,1,.3,1),
              border-color .2s ease;
}
.sm-card:hover{
  box-shadow: var(--shadow-2, 0 6px 20px rgba(21,42,33,.10));
  transform: translateY(-2px);
  border-color: rgba(201,162,39,.45);
}
.sm-card__title{
  font-family: var(--font-display, serif);
  font-size: var(--fs-h4, 19px);
  font-weight: 500;
  color: var(--brand-ink, #152A21);
  margin: 0 0 var(--sp-2, 8px);
  letter-spacing: .01em;
}
.sm-card__subtitle{
  font-size: var(--fs-body, 14.5px);
  color: var(--brand-text-2, #6B6355);
  margin: 0 0 var(--sp-4, 16px);
  line-height: 1.65;
}
.sm-card__meta{
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  font-size: var(--fs-small, 13px);
  color: var(--brand-text-3, #9A9080);
  padding-top: var(--sp-3, 12px);
  border-top: 1px solid var(--brand-rule, #DED5C4);
}
/* 顶部细金线：代替 Uiverse 的斜角 banner，克制的书卷感 */
.sm-card--accent::before{
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 3px;
  border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
  background: linear-gradient(90deg, var(--brand-gold, #C9A227), var(--brand-gold-lit, #E8B45A));
}
.sm-card--flat{ box-shadow: none; }
.sm-card--flat:hover{ transform: none; box-shadow: var(--shadow-1, 0 1px 3px rgba(21,42,33,.06)); }

/* --------------------------------------------------------------------------
   2. 表格 .sm-table
   -------------------------------------------------------------------------- */
.sm-table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--brand-paper, #FBF4E9);
  border: 1px solid var(--brand-rule, #DED5C4);
  border-radius: var(--radius-lg, 12px);
}
.sm-table{
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body, 14.5px);
  min-width: 560px;          /* 窄屏可横向滚动，不压字 */
}
.sm-table caption{
  caption-side: top;
  text-align: left;
  padding: var(--sp-4, 16px) var(--sp-5, 24px) 0;
  font-family: var(--font-display, serif);
  font-size: var(--fs-h5, 16px);
  color: var(--brand-ink, #152A21);
}
.sm-table th{
  text-align: left;
  font-weight: 500;
  font-size: var(--fs-small, 13px);
  letter-spacing: .04em;
  color: var(--brand-primary, #14543E);
  background: rgba(20,84,62,.045);
  padding: 11px var(--sp-4, 16px);
  border-bottom: 1.5px solid var(--brand-rule, #DED5C4);
  white-space: nowrap;
}
.sm-table td{
  padding: 11px var(--sp-4, 16px);
  border-bottom: 1px solid rgba(222,213,196,.7);
  color: var(--brand-text, #2A2620);
  vertical-align: top;
}
.sm-table tbody tr:last-child td{ border-bottom: none; }
.sm-table tbody tr{ transition: background .14s ease; }
.sm-table tbody tr:hover{ background: rgba(232,180,90,.10); }
/* 数字列对齐：表格里的分数、位次要能竖着比 */
.sm-table .num{
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
/* 来源链接：标注「可点开原文核对」 */
.sm-table a.src{
  color: var(--brand-primary, #14543E);
  text-decoration: none;
  border-bottom: 1px dotted rgba(20,84,62,.5);
}
.sm-table a.src:hover{
  color: var(--brand-gold, #C9A227);
  border-bottom-color: var(--brand-gold, #C9A227);
}

/* --------------------------------------------------------------------------
   3. 表单 .sm-form
   -------------------------------------------------------------------------- */
.sm-form{ display: grid; gap: var(--sp-4, 16px); }
.sm-field{ display: grid; gap: 6px; }
.sm-field > label{
  font-size: var(--fs-small, 13px);
  color: var(--brand-primary, #14543E);
  letter-spacing: .02em;
}
.sm-field > .hint{
  font-size: var(--fs-micro, 12.5px);
  color: var(--brand-text-3, #9A9080);
}
.sm-input{
  font: inherit;
  font-size: var(--fs-body, 14.5px);
  color: var(--brand-text, #2A2620);
  background: #FFFDF8;
  border: 1px solid var(--brand-rule, #DED5C4);
  border-radius: var(--radius-md, 8px);
  padding: 10px 12px;
  min-height: 42px;              /* 触摸友好 */
  transition: border-color .16s ease, box-shadow .16s ease;
  width: 100%;
}
.sm-input::placeholder{ color: rgba(154,144,128,.75); }
.sm-input:hover{ border-color: rgba(20,84,62,.35); }
.sm-input:focus{
  outline: none;
  border-color: var(--brand-gold, #C9A227);
  box-shadow: 0 0 0 3px rgba(201,162,39,.16);
}
.sm-input:disabled{ background: rgba(222,213,196,.3); color: var(--brand-text-3,#9A9080); }
/* 数字输入：分数/位次用等宽数字更好比 */
.sm-input--num{ font-variant-numeric: tabular-nums; }

textarea.sm-input{ min-height: 92px; resize: vertical; line-height: 1.6; }
select.sm-input{
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--brand-primary,#14543E) 50%),
                    linear-gradient(135deg, var(--brand-primary,#14543E) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.sm-form__row{ display: flex; gap: var(--sp-3, 12px); flex-wrap: wrap; align-items: flex-end; }
.sm-form__row .sm-field{ flex: 1 1 180px; }

/* 提交按钮 */
.sm-btn{
  font: inherit;
  font-size: var(--fs-body, 14.5px);
  font-weight: 500;
  cursor: pointer;
  border-radius: 999px;
  padding: 10px 24px;
  min-height: 42px;
  border: 1px solid transparent;
  transition: filter .16s ease, background .16s ease, border-color .16s ease;
}
.sm-btn--primary{
  background: linear-gradient(135deg, var(--brand-primary,#14543E), var(--brand-dim,#0F6E56));
  color: var(--brand-paper, #FBF4E9);
  border-color: #0B3A2B;
  box-shadow: 0 2px 10px rgba(20,84,62,.18);
}
.sm-btn--primary:hover{ filter: brightness(1.12); }
.sm-btn--ghost{
  background: rgba(20,84,62,.06);
  color: var(--brand-primary, #14543E);
  border-color: rgba(20,84,62,.30);
}
.sm-btn--ghost:hover{ background: rgba(20,84,62,.12); }
.sm-btn[disabled]{ opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   4. 提示条 .sm-note
   -------------------------------------------------------------------------- */
.sm-note{
  display: flex;
  gap: var(--sp-3, 12px);
  align-items: flex-start;
  padding: 12px var(--sp-4, 16px);
  border-radius: var(--radius-md, 8px);
  border-left: 3px solid var(--brand-gold, #C9A227);
  background: rgba(232,180,90,.10);
  font-size: var(--fs-small, 13.5px);
  line-height: 1.65;
  color: var(--brand-text, #2A2620);
}
.sm-note--warn{ border-left-color: #C2410C; background: rgba(194,65,12,.08); }
.sm-note--ok{ border-left-color: var(--brand-primary,#14543E); background: rgba(20,84,62,.06); }

/* --------------------------------------------------------------------------
   5. 移动端
   -------------------------------------------------------------------------- */
@media (max-width: 640px){
  .sm-card{ padding: var(--sp-4, 16px); }
  .sm-form__row{ flex-direction: column; align-items: stretch; }
  .sm-form__row .sm-field{ flex: 1 1 auto; }
  .sm-btn{ width: 100%; }
}
@media (prefers-reduced-motion: reduce){
  .sm-card{ transition: none; }
  .sm-card:hover{ transform: none; }
}