/* ============================================================
   知遥 · 个人主页 — 后台样式
   在 ../styles.css 的设计令牌之上叠加，只定义后台专有组件。
   ============================================================ */

/* 后台里的文字链接不走公开页「下划线只在 hover 出现」的规则，
   表单与按钮需要更明确的边界感。 */
.admin {
  background: var(--surface-sunk);
}

/* ---------- 顶栏 ---------- */
.abar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.abar__inner {
  max-width: 1020px;
  margin: 0 auto;
  padding: var(--s3) var(--s5);
  display: flex;
  align-items: center;
  gap: var(--s5);
}
.abar__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: auto;
}
.abar__mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.82rem;
  font-weight: 700;
}
.abar__text {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.abar__nav { display: flex; align-items: center; gap: var(--s4); }
.abar__side { display: flex; align-items: center; gap: var(--s4); }

.abar__link {
  font-size: 0.88rem;
  color: var(--ink-2);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.abar__link:hover { color: var(--ink); }
.abar__link.is-current {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.abar__logout { display: flex; }

/* ---------- 主体 ---------- */
.amain {
  max-width: 1020px;
  margin: 0 auto;
  padding: var(--s6) var(--s5) var(--s8);
}
.amain--narrow { max-width: 720px; }

.apage-title {
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  margin-bottom: var(--s5);
}

.afoot {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 var(--s5) var(--s8);
  font-size: 0.8rem;
  color: var(--ink-3);
}

/* ---------- 提示条 ---------- */
.aflash {
  margin-bottom: var(--s4);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  border-left-width: 3px;
  font-size: 0.9rem;
  background: var(--surface);
}
.aflash--ok { border-left-color: #2f7d4f; color: #245f3d; }
.aflash--error { border-left-color: #a33a2c; color: #8c3225; }
.aflash--warn { border-left-color: #b07d1f; color: #8a6414; }
[data-theme="dark"] .aflash--ok { color: #86d3a5; }
[data-theme="dark"] .aflash--error { color: #e5a08c; }
[data-theme="dark"] .aflash--warn { color: #e0c07a; }

/* ---------- 头像设置 ---------- */
.aavatar {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  margin-bottom: var(--s4);
}
.aavatar__preview {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--surface-sunk);
  display: grid;
  place-items: center;
}
.aavatar__preview img { width: 100%; height: 100%; object-fit: cover; }
.aavatar__empty { font-size: 0.78rem; color: var(--ink-3); }
.aavatar__field { flex: 1; min-width: 0; }

/* ---------- 复选框 ---------- */
.acheck {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--ink-2);
  cursor: pointer;
  padding-bottom: 0.15rem;
}
.acheck input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ---------- 下拉选择（图标选择器） ---------- */
.arow-item__field select {
  width: 100%;
  padding: 0.5rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.arow-item__field select:hover { border-color: var(--ink-3); }
.arow-item__field select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.alist__badge--muted { color: var(--ink-3); }

.alede {
  margin-bottom: var(--s5);
  color: var(--ink-2);
  font-size: 0.95rem;
}
.anote {
  margin-top: var(--s5);
  font-size: 0.84rem;
  color: var(--ink-3);
}

/* ---------- 卡片 ---------- */
.acard {
  margin-bottom: var(--s5);
  padding: var(--s5);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--surface);
}
.acard__title {
  font-size: 1.06rem;
  margin-bottom: var(--s2);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule-soft);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.acard__hint {
  margin-bottom: var(--s4);
  font-size: 0.86rem;
  color: var(--ink-3);
  line-height: 1.7;
}
.acard__foot {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule-soft);
  font-size: 0.88rem;
}
.acard__aside { font-size: 0.82rem; color: var(--ink-3); }

/* 安装向导的步骤编号 */
.astep {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 0.76rem;
  font-family: var(--mono);
}
.asetup + .asetup {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule-soft);
}
.adetails { margin-top: var(--s4); font-size: 0.86rem; }
.adetails summary { cursor: pointer; color: var(--ink-2); }

/* ---------- 概览统计 ---------- */
.agrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s5);
}
.astat {
  padding: var(--s4);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.astat__label { font-size: 0.78rem; color: var(--ink-3); }
.astat__value { font-size: 1.55rem; font-weight: 700; line-height: 1.3; }
.astat__value--small { font-size: 0.95rem; font-weight: 500; }

.alist { display: flex; flex-direction: column; }
.alist__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.92rem;
}
.alist__row:last-child { border-bottom: 0; }
.alist__name { color: var(--ink-2); }
.alist__count { font-size: 0.9rem; }
.alist__badge {
  font-size: 0.8rem;
  padding: 0.1rem 0.5rem;
  border-radius: var(--r-sm);
  border: 1px solid currentColor;
}
.alist__badge--ok { color: #2f7d4f; }
.alist__badge--warn { color: #9a6b1f; }
[data-theme="dark"] .alist__badge--ok { color: #86d3a5; }
[data-theme="dark"] .alist__badge--warn { color: #d7b571; }

/* ---------- 表单控件（公开页没有这些组件） ---------- */
.field { margin-bottom: var(--s4); }
.field__label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.84rem;
  color: var(--ink-2);
}
.field__input,
.arow-item__field input,
.arow-item__field textarea {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.94rem;
  line-height: 1.6;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.field__input:hover,
.arow-item__field input:hover,
.arow-item__field textarea:hover { border-color: var(--ink-3); }

.field__input:focus-visible,
.arow-item__field input:focus-visible,
.arow-item__field textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.field__input:disabled,
.arow-item__field input:disabled {
  background: var(--surface-sunk);
  color: var(--ink-3);
  cursor: not-allowed;
}
.field__input--code {
  font-family: var(--mono);
  font-size: 1.15rem;
  letter-spacing: 0.28em;
  max-width: 10rem;
}
.field__hint {
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: var(--ink-3);
  line-height: 1.6;
}

/* 按钮（后台专属，覆盖公开页的链接样式） */
.btn-primary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.05rem;
  border-radius: var(--r-md);
  font-size: 0.92rem;
  line-height: 1.5;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--ink); border-color: var(--ink); }
.btn-primary:active { transform: scale(0.99); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary--inline { padding: 0.4rem 0.85rem; font-size: 0.88rem; }

.btn-ghost {
  background: var(--surface);
  color: var(--ink-2);
  border-color: var(--rule);
}
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-3); background: var(--paper); }
.btn-ghost:active { transform: scale(0.99); }

/* ---------- 内容编辑器 ---------- */
.ablock__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s4);
  margin-bottom: var(--s4);
}
.ablock__head .arow-item__field { flex: 1 1 12rem; }

.arow-list {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-bottom: var(--s4);
}
.arow-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
  background: var(--paper);
}
.arow-item__no {
  flex: none;
  width: 1.6rem;
  padding-top: 1.4rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-3);
}
.arow-item__fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}
.arow-item__field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 10rem;
  min-width: 0;
}
.arow-item__field.small { flex: 0 1 8rem; }
.arow-item__field.grow { flex: 1 1 16rem; }
.arow-item__field--wide { flex: 1 1 18rem; }
.arow-item__label {
  font-size: 0.76rem;
  color: var(--ink-3);
}
.arow-item__label code {
  font-family: var(--mono);
  font-size: 0.9em;
  padding: 0 0.15em;
  background: var(--accent-tint);
  border-radius: 2px;
}
.arow-item textarea { resize: vertical; font-family: var(--mono); font-size: 0.86rem; }

.arow-item__del {
  flex: none;
  align-self: flex-end;
  padding: 0.3rem 0.5rem;
  font-size: 0.78rem;
  color: var(--ink-3);
  border-radius: var(--r-sm);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.arow-item__del:hover { color: #a33a2c; background: rgba(163, 58, 44, 0.08); }

.arow-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s3) var(--s4);
}
.arow-actions .arow-item__field { flex: 1 1 16rem; }

.asavebar {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
  padding: var(--s3) 0;
  /* 实色打底，避免滚动时表单字段从按钮下面透出来 */
  background: var(--surface-sunk);
  border-top: 1px solid var(--rule);
}
.asavebar::before {
  /* 上方渐变，让「浮起来」的感觉更自然 */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--s5);
  background: linear-gradient(transparent, var(--surface-sunk));
  pointer-events: none;
}

/* ---------- 安装向导的二维码区 ---------- */
.aqr {
  display: flex;
  gap: var(--s5);
  align-items: flex-start;
  margin-bottom: var(--s3);
}
.aqr__code {
  flex: none;
  width: 208px;
  padding: var(--s3);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: #fff;
  display: grid;
  place-items: center;
  min-height: 208px;
}
/* 二维码必须始终是深色画在白底上，否则暗色主题下扫不出来 */
.aqr__code canvas { display: block; width: 100%; height: auto; }
.aqr__fallback {
  font-size: 0.82rem;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.7;
}
.aqr__side { flex: 1; min-width: 0; }
.aqr__label {
  font-size: 0.76rem;
  color: var(--ink-3);
  margin-bottom: 0.15rem;
}
.aqr__value {
  font-size: 0.9rem;
  margin-bottom: var(--s3);
  word-break: break-all;
}
.aqr .asecret { margin-bottom: var(--s3); }
.acard__hint--tight { margin-bottom: var(--s4); }

/* ---------- 密钥展示 ---------- */
.asecret {
  margin-bottom: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px dashed var(--rule);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: 0.14em;
  word-break: break-all;
  user-select: all;
}
.auri {
  margin: var(--s3) 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-3);
  word-break: break-all;
  user-select: all;
}
.arow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }

/* ---------- 独立的登录 / 安装页 ---------- */
.admin--centered {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--s5);
}
.gate {
  width: 100%;
  max-width: 26rem;
}
.gate__card {
  padding: var(--s6);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--surface);
}
.gate__brand {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: var(--s4);
  font-size: 0.84rem;
  color: var(--ink-3);
  letter-spacing: 0.06em;
}
.gate__mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.72rem;
}
.gate__title { font-size: 1.35rem; margin-bottom: var(--s2); }
.gate__hint {
  margin-bottom: var(--s5);
  font-size: 0.88rem;
  color: var(--ink-3);
  line-height: 1.7;
}
.gate__form .btn-primary { width: 100%; margin-top: var(--s2); }
.gate__foot {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule-soft);
  font-size: 0.82rem;
  color: var(--ink-3);
  line-height: 1.8;
}
.gate__foot code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--accent-tint);
  padding: 0 0.2em;
  border-radius: 2px;
}

.aform--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s3);
}
.aform--inline .field { margin-bottom: 0; }

/* ---------- 响应式 ---------- */
@media (max-width: 760px) {
  .abar__inner { flex-wrap: wrap; gap: var(--s3); }
  .abar__nav { order: 3; width: 100%; overflow-x: auto; }
  .abar__link { white-space: nowrap; }
  .amain, .abar__inner, .afoot { padding-left: var(--s4); padding-right: var(--s4); }
  .agrid { grid-template-columns: minmax(0, 1fr); }
  .acard { padding: var(--s4); }
  .arow-item { flex-wrap: wrap; }
  .arow-item__no { padding-top: 0; }
  .arow-item__del { align-self: flex-start; }
  /* 窄屏下二维码在上、信息在下 */
  .aqr { flex-direction: column; gap: var(--s4); }
  .aqr__code { width: 100%; max-width: 260px; margin: 0 auto; }
  /* 手机上编辑页很长，保存条同样常驻底部（否则要滑到底才能保存） */
  .asavebar {
    margin-left: calc(-1 * var(--s4));
    margin-right: calc(-1 * var(--s4));
    padding: var(--s3) var(--s4);
  }
  .asavebar .btn-primary { flex: 1; }
}