/* 运营后台：给工作人员用的面板，信息可以比大屏密一些，但同一套主题 */
body { font-family: var(--font-cn); }
.a-wrap { max-width: 1400px; margin: 0 auto; padding: 32px 32px 64px; }
.a-head { display: flex; align-items: center; gap: 24px; }
.a-head .logo { font-size: 24px; }
.a-head .logo-mark { display: inline-flex; width: 1.3em; height: 1.3em; }
.a-head .logo-mark svg { width: 100%; height: 100%; }
.a-head h1 { font-size: 32px; font-weight: 900; }
.a-back { margin-left: auto; height: 64px; padding: 0 28px; font-size: 20px; }
.a-kpis { margin-top: 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi { background: var(--bg-2); border-radius: var(--r); padding: 20px; }
.kpi p { font-size: 15px; color: var(--text-2); }
.kpi b { display: block; margin-top: 8px; font-size: 38px; font-weight: 900; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.a-grid { margin-top: 20px; display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 16px; }
.a-panel { background: var(--bg-2); border-radius: var(--r); padding: 24px; }
.a-panel h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; margin-bottom: 16px; }
.a-panel h2 .ico { color: var(--brand); }
.a-form { display: flex; flex-direction: column; gap: 12px; }
.a-row { display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: 12px; min-height: 64px; font-size: 16px; }
.a-row input[type=number] { height: 56px; border-radius: var(--r-in); border: 2px solid var(--field-line); background: var(--bg-3); padding: 0 12px; font-size: 20px; font-family: var(--font-display); font-weight: 800; text-align: right; color: var(--text); outline: none; } /* 数值用正文色，对比够 */
.a-row input[type=number]:focus { border-color: var(--brand); }
.a-row input[type=checkbox] { width: 26px; height: 26px; accent-color: var(--brand); justify-self: end; }
.a-actions { margin-top: 20px; display: flex; align-items: center; gap: 16px; }
.a-btn { height: 64px; padding: 0 22px; font-size: 16px; }
.a-saved { color: var(--brand); font-size: 15px; font-weight: 700; }
.a-note { color: var(--text-2); font-size: 15px; }
.bars { display: flex; flex-direction: column; gap: 10px; }
.bar { display: grid; grid-template-columns: 110px 1fr 48px; align-items: center; gap: 12px; font-size: 15px; }
.bar i { height: 18px; border-radius: 4px; background: var(--brand); min-width: 2px; }
.bar b { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.a-reports { display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--text-2); max-height: 260px; overflow: auto; }
.a-reports div { background: var(--bg-3); border-radius: var(--r-in); padding: 10px 12px; }
.a-hint { font-size: 14px; color: var(--text-2); max-width: 360px; line-height: 1.5; }
.a-gap { margin-top: 28px; }
.a-row-text input { height: 56px; border-radius: var(--r-in); border: 2px solid var(--field-line); background: var(--bg-3); padding: 0 12px; font-size: 16px; outline: none; }
.a-row-text { grid-template-columns: 1fr 180px; }
.a-row input[type=text]:focus { border-color: var(--brand); }
.a-note { line-height: 1.6; margin-bottom: 14px; }
.word-group { margin-bottom: 14px; }
.word-group summary { display: flex; align-items: center; gap: 6px; min-height: 40px; font-size: 15px; font-weight: 700; color: var(--text); cursor: pointer; list-style: none; }
.word-group summary::-webkit-details-marker { display: none; }
.word-group summary .ico { font-size: 14px; color: var(--text-2); transition: transform 0.2s; }
.word-group[open] summary .ico { transform: rotate(90deg); }
.word-group[open] summary { margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px 0 14px; border-radius: 999px; background: var(--bg-3); font-size: 15px; }
.chip .ico { font-size: 14px; color: var(--text-2); }
.chip:hover .ico { color: var(--danger); }
.word-add { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; margin-top: 8px; }
.word-add select, .word-add input { height: 64px; border-radius: var(--r-in); border: 2px solid var(--field-line); background: var(--bg-3); color: var(--text); padding: 0 12px; font-size: 16px; font-family: var(--font-cn); outline: none; }
.word-add input:focus { border-color: var(--brand); }
.link { margin-top: 10px; min-height: 44px; font-size: 14px; color: var(--text-2); text-decoration: underline; text-underline-offset: 4px; }
.a-reports div { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: center; }
.a-reports div span { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) { .a-grid { grid-template-columns: 1fr 1fr; } .a-kpis { grid-template-columns: 1fr 1fr; } }

/* 刷新时先隐藏，数据和表单就绪后淡入 */
.a-wrap { transition: opacity 0.3s var(--ease); }
body.booting .a-wrap { opacity: 0; }

.a-copy { margin-top: 24px; text-align: center; font-size: 12px; color: #8a8a85; }
/* 手机上打开后台：一栏排下来，不左右滑 */
@media (max-width: 760px) {
  .a-wrap { padding: 20px 16px 40px; }
  .a-head { flex-wrap: wrap; gap: 12px 16px; }
  .a-back { margin-left: 0; height: 52px; font-size: 16px; }
  .a-kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi b { font-size: 28px; }
  .a-grid { grid-template-columns: 1fr; }
  .a-row-text { grid-template-columns: 1fr 140px; }
  .bar { grid-template-columns: 88px 1fr 40px; }
  .a-grid > *, .a-kpis > * { min-width: 0; } /* 网格里的面板别被最长的一行撑宽 */
  .word-add { grid-template-columns: 1fr auto; }
  .word-add select { grid-column: 1 / -1; }
  .word-add input { min-width: 0; }
  .chip { min-height: 44px; }
  .a-row input[type=checkbox] { width: 44px; height: 44px; } /* 手机上手指点得准 */
}