/* TJ·MO 组件层 —— 认证页 / 后台 / 收银台共用同一套，保证不会长成三个样。
 * 依赖 tokens.css，必须在它之后加载。
 */

/* ============ 按钮 ============ */
.tj-btn{
  --_bg:var(--tj-surface); --_fg:var(--tj-ink); --_bd:var(--tj-line);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--tj-s2);
  min-height:42px; padding:0 var(--tj-s5);
  font:inherit; font-size:14px; font-weight:500; letter-spacing:.01em;
  color:var(--_fg); background:var(--_bg);
  border:1px solid var(--_bd); border-radius:var(--tj-r2);
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background var(--tj-dur) var(--tj-ease), border-color var(--tj-dur) var(--tj-ease), transform .12s var(--tj-ease), box-shadow var(--tj-dur) var(--tj-ease);
}
.tj-btn:hover:not(:disabled){box-shadow:var(--tj-sh2)}
.tj-btn:active:not(:disabled){transform:translateY(1px)}
.tj-btn:disabled{opacity:.45; cursor:not-allowed}
.tj-btn--primary{--_bg:var(--tj-accent); --_fg:var(--tj-accent-ink); --_bd:var(--tj-accent)}
.tj-btn--primary:hover:not(:disabled){--_bg:var(--tj-accent-hover)}
.tj-btn--ghost{--_bg:transparent; --_bd:transparent; --_fg:var(--tj-ink-2)}
.tj-btn--ghost:hover:not(:disabled){--_bg:var(--tj-surface-2); box-shadow:none}
.tj-btn--danger{--_fg:var(--tj-err); --_bd:var(--tj-line)}
.tj-btn--block{width:100%}
.tj-btn--sm{min-height:32px; padding:0 var(--tj-s3); font-size:13px}

/* 按钮忙碌态：转圈，但同一时刻页面只有它在动 */
.tj-btn[data-busy="1"]{color:transparent!important; pointer-events:none; position:relative}
.tj-btn[data-busy="1"]::after{
  content:''; position:absolute; width:15px; height:15px;
  border:2px solid currentColor; border-top-color:transparent; border-radius:50%;
  color:var(--tj-accent-ink); animation:tj-spin .6s linear infinite;
}
.tj-btn--ghost[data-busy="1"]::after,.tj-btn:not(.tj-btn--primary)[data-busy="1"]::after{color:var(--tj-ink-2)}
@keyframes tj-spin{to{transform:rotate(360deg)}}

/* ============ 表单 ============ */
.tj-field{display:flex; flex-direction:column; gap:6px; margin-bottom:var(--tj-s4)}
.tj-label{font-size:12.5px; font-weight:500; color:var(--tj-ink-2); letter-spacing:.02em}
.tj-input,.tj-select,.tj-textarea{
  width:100%; min-height:42px; padding:10px var(--tj-s3);
  font:inherit; font-size:15px; color:var(--tj-ink);
  background:var(--tj-surface); border:1px solid var(--tj-line); border-radius:var(--tj-r2);
  transition:border-color var(--tj-dur) var(--tj-ease), box-shadow var(--tj-dur) var(--tj-ease);
}
.tj-textarea{min-height:96px; resize:vertical; line-height:1.55}
.tj-input:hover,.tj-select:hover,.tj-textarea:hover{border-color:var(--tj-ink-3)}
.tj-input:focus,.tj-select:focus,.tj-textarea:focus{outline:none; border-color:var(--tj-accent); box-shadow:var(--tj-ring)}
.tj-input[aria-invalid="true"]{border-color:var(--tj-err)}
.tj-input::placeholder{color:var(--tj-ink-3)}
.tj-hint{font-size:12px; color:var(--tj-ink-3)}
.tj-err-text{font-size:12.5px; color:var(--tj-err); min-height:0}

/* ============ 卡片 / 面板 ============ */
.tj-card{background:var(--tj-surface); border:1px solid var(--tj-line); border-radius:var(--tj-r3); box-shadow:var(--tj-sh1)}
.tj-card__hd{padding:var(--tj-s4) var(--tj-s5); border-bottom:1px solid var(--tj-line-soft); display:flex; align-items:center; justify-content:space-between; gap:var(--tj-s3)}
.tj-card__bd{padding:var(--tj-s5)}
.tj-card__title{font-size:15px; font-weight:600; font-family:var(--tj-font-body); letter-spacing:-.01em}

/* ============ 徽标 ============ */
.tj-badge{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; font-size:11.5px; font-weight:500; border-radius:var(--tj-rf); background:var(--tj-surface-2); color:var(--tj-ink-2); border:1px solid var(--tj-line-soft); white-space:nowrap}
.tj-badge--ok{background:var(--tj-ok-bg); color:var(--tj-ok); border-color:var(--tj-ok-line)}
.tj-badge--warn{background:var(--tj-warn-bg); color:var(--tj-warn); border-color:var(--tj-warn-line)}
.tj-badge--err{background:var(--tj-err-bg); color:var(--tj-err); border-color:var(--tj-err-line)}
.tj-badge--accent{background:var(--tj-accent-soft); color:var(--tj-accent); border-color:var(--tj-accent-line)}

/* ============ 表格：桌面是表，手机自动变卡片 ============ */
.tj-table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tj-table{width:100%; border-collapse:collapse; font-size:14px}
.tj-table th{
  text-align:left; padding:10px var(--tj-s3); font-size:11.5px; font-weight:600;
  color:var(--tj-ink-3); text-transform:uppercase; letter-spacing:.06em;
  border-bottom:1px solid var(--tj-line); white-space:nowrap;
}
.tj-table td{padding:12px var(--tj-s3); border-bottom:1px solid var(--tj-line-soft); vertical-align:middle}
.tj-table tbody tr{transition:background var(--tj-dur) var(--tj-ease)}
.tj-table tbody tr:hover{background:var(--tj-surface-2)}
.tj-table td.tj-num{font-family:var(--tj-font-mono); font-variant-numeric:tabular-nums; text-align:right}

@media (max-width:640px){
  .tj-table thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .tj-table,.tj-table tbody,.tj-table tr,.tj-table td{display:block; width:100%}
  .tj-table tr{border:1px solid var(--tj-line); border-radius:var(--tj-r2); margin-bottom:var(--tj-s3); padding:var(--tj-s2) var(--tj-s3); background:var(--tj-surface)}
  .tj-table td{border:none; padding:7px 0; display:flex; justify-content:space-between; align-items:center; gap:var(--tj-s4)}
  .tj-table td::before{content:attr(data-th); font-size:11.5px; font-weight:600; color:var(--tj-ink-3); text-transform:uppercase; letter-spacing:.05em; flex:0 0 auto}
  .tj-table td.tj-num{text-align:right}
}

/* ============ 空状态 / 骨架屏 ============ */
.tj-empty{padding:var(--tj-s8) var(--tj-s5); text-align:center; color:var(--tj-ink-3)}
.tj-empty__t{font-size:15px; color:var(--tj-ink-2); margin-bottom:6px}
.tj-skel{background:linear-gradient(90deg,var(--tj-surface-2) 25%,var(--tj-line-soft) 37%,var(--tj-surface-2) 63%); background-size:400% 100%; animation:tj-shimmer 1.4s ease infinite; border-radius:var(--tj-r1); height:1em}
@keyframes tj-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ============ 提示条 ============ */
.tj-alert{display:flex; gap:var(--tj-s3); padding:var(--tj-s3) var(--tj-s4); border-radius:var(--tj-r2); font-size:13.5px; line-height:1.5; border:1px solid var(--tj-line); background:var(--tj-surface-2); color:var(--tj-ink-2)}
.tj-alert--err{background:var(--tj-err-bg); border-color:var(--tj-err-line); color:var(--tj-err-ink)}
.tj-alert--ok{background:var(--tj-ok-bg); border-color:var(--tj-ok-line); color:var(--tj-ok-ink)}
.tj-alert[hidden]{display:none}

/* ============ 工具类 ============ */
.tj-row{display:flex; align-items:center; gap:var(--tj-s3)}
.tj-row--between{justify-content:space-between}
.tj-wrap{width:100%; max-width:var(--tj-maxw); margin:0 auto; padding:0 var(--tj-s5)}
.tj-stack>*+*{margin-top:var(--tj-s4)}
.tj-muted{color:var(--tj-ink-3)}
.tj-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}