/* admin_rules 页面组的专用样式（評分規則：版本列表 / 規則編輯 / 排名變化預覽）。
 * 只用 app.css 里的 var(--token)，不写十六进制色值；兼容 iOS Safari 14
 * （不用 inset / flex gap / aspect-ratio / :is() / dvh；间距用 margin，分隔用 border）。
 * class 前缀：ar-。係數表做成纵向卡片（键 + 逐项输入），不横向撑破 320 宽。
 */

/* ---------------------------------------------------------------- 版本列表 */
.ar-top { margin: var(--sp-2) var(--gutter) var(--sp-4); }
.ar-card {
  margin: 0 var(--gutter) var(--sp-3);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  overflow: hidden;
}
.ar-card__main { display: block; padding: var(--sp-3) var(--sp-4); text-decoration: none; color: inherit; }
.ar-card__main:active { background: var(--fill); }
.ar-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-1); }
.ar-card__name { flex: 0 1 auto; min-width: 0; margin-right: var(--sp-2); }
.ar-card__actions { padding: 0 var(--sp-3) var(--sp-3); }

/* ---------------------------------------------------------------- 通用小件（編輯 / 預覽共用） */
.ar-tipwrap { margin: var(--sp-2) var(--gutter) var(--sp-3); }
.ar-sec-title { margin: var(--sp-4) var(--gutter) var(--sp-1); padding: 0 var(--sp-1); }
.ar-errors { margin: 0 var(--gutter) var(--sp-3); }
.ar-errline { margin-top: var(--sp-1); }

/* 启用面板（ui.sheet 内） */
.ar-act-hint { padding: var(--sp-1) var(--sp-4) var(--sp-2); }
.ar-act-body { padding: 0 var(--sp-2); }
.ar-act-sub { padding: 0 var(--sp-4) var(--sp-2); }
.ar-act-errors { padding: 0 var(--sp-4) var(--sp-2); }
.ar-act-errors .c-red { margin-bottom: var(--sp-1); }
.ar-act-errline { margin-top: var(--sp-1); }

/* ---------------------------------------------------------------- 規則編輯：係數表（纵向卡片行）
 * 小程序是「代码 | 名称 | 名次 | 係數 | 類別組」一行横排，375 宽下名称只剩几十像素；
 * H5 改成每行一张小卡片：键 + 移除在上，各输入项带小标题换行排布，320 宽也不溢出。 */
.ar-tbl {
  margin: 0 var(--gutter);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  overflow: hidden;
}
.ar-row { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.ar-row + .ar-row { border-top: var(--hairline) solid var(--separator); }
.ar-row__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); }
.ar-key { color: var(--label-2); word-break: break-all; }
.ar-del {
  flex: 0 0 auto;
  min-height: var(--tap);
  padding: 0 0 0 var(--sp-3);
  border: 0;
  background: none;
  color: var(--red-ink);
  font-size: 13px;
}
.ar-del:active { opacity: 0.6; }
/* 两列网格（无 flex gap：用子元素 margin）；窄屏自动换行成单列 */
.ar-row__grid { display: flex; flex-wrap: wrap; margin-right: calc(-1 * var(--sp-2)); }
.ar-cell { display: block; flex: 1 1 140px; min-width: 0; margin: var(--sp-2) var(--sp-2) 0 0; }
.ar-cell__label { display: block; margin-bottom: 2px; }
.ar-in { width: 100%; text-align: left; padding: 0 var(--sp-2); }
.ar-in--num { text-align: right; }
.ar-in.is-bad { background: var(--red-soft); }
.ar-hint { margin: var(--sp-1) var(--gutter) 0; }
.ar-hint[hidden] { display: none; }
/* 類別組选择：整行可点的伪下拉（箭头用 ::after，textContent 更新时不丢） */
.ar-pick {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--sp-3) 0 var(--sp-2);
  border: 0;
  background: var(--fill);
  border-radius: 10px;
  color: var(--label);
  font-size: 16px;
  text-align: right;
}
button.ar-pick:active { opacity: 0.7; }
.ar-pick::after {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-left: var(--sp-2);
  border-right: 2px solid var(--label-3);
  border-bottom: 2px solid var(--label-3);
  transform: rotate(-45deg);
}
.ar-pick.is-empty { color: var(--label-3); }
.ar-pick--row { max-width: 60%; min-width: 140px; }
.ar-add { margin: var(--sp-2) var(--gutter) 0; }
.ar-add .btn { width: 100%; }

/* 編輯頁附加獎疊加分段控件 */
.ar-segwrap { margin: 0 var(--gutter); }

/* ---------------------------------------------------------------- 排名變化預覽：縱向卡片行
 * 小程序是三列横排（固定 190rpx + 260rpx），H5 改为会员名整行、名次 / 总分两列，320 宽不溢出。 */
.ar-simmeta { margin: 0 var(--gutter) var(--sp-3); padding: 0 var(--sp-1); }
.ar-sim {
  margin: 0 var(--gutter) var(--sp-4);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  overflow: hidden;
}
.ar-sim__row { padding: var(--sp-2) var(--sp-3); }
.ar-sim__row + .ar-sim__row { border-top: var(--hairline) solid var(--separator); }
.ar-sim__member { display: flex; align-items: baseline; justify-content: space-between; }
.ar-sim__member > span:first-child { flex: 0 1 auto; min-width: 0; }
.ar-sim__member > span:last-child { flex: 0 0 auto; margin-left: var(--sp-2); }
.ar-sim__cols { display: flex; margin-top: var(--sp-1); }
.ar-sim__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.ar-sim__col + .ar-sim__col { margin-left: var(--sp-3); padding-left: var(--sp-3); border-left: var(--hairline) solid var(--separator); }
.ar-sim__col > span + span { margin-top: 2px; }
.ar-sim__score { color: var(--label); word-break: break-all; }