/* ==========================================================================
   account.css — 账号与反馈 UI
   复用 style.css 的设计变量与 .overlay/.modal/.chip/.btn，不覆盖任何原有类
   ========================================================================== */

/* ---------- 顶栏入口 ---------- */
.auth-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
}
/* hidden 必须压过 display:flex / inline-flex，否则关闭开关后仍会显示 */
.auth-slot[hidden] {
  display: none !important;
}
.auth-link {
  font-size: 13.5px;
  color: var(--text-2);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  text-decoration: none;
  white-space: nowrap;
}
.auth-link:hover {
  color: var(--text);
  border-color: var(--green);
  text-decoration: none;
  background: color-mix(in srgb, var(--green) 8%, transparent);
}
.auth-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--green), #0d9488);
  text-decoration: none;
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--green) 70%, transparent);
}
.auth-avatar:hover { text-decoration: none; filter: brightness(1.06); }

body.fb-open { overflow: hidden; }

/* ---------- 反馈侧边栏面板 ---------- */
.fb-backdrop {
  position: fixed;
  inset: 0;
  z-index: 74;
  background: rgba(6, 16, 11, .42);
  backdrop-filter: blur(2px);
}
.fb-backdrop[hidden] { display: none; }
.fb-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 75;
  display: flex;
  flex-direction: column;
  width: min(404px, 94vw);
  height: 100dvh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -28px 0 70px -24px rgba(0, 0, 0, .55);
  transform: translateX(104%);
  visibility: hidden;
  transition: transform .3s cubic-bezier(.22, .82, .24, 1), visibility .3s ease;
}
.fb-sidebar.open { transform: translateX(0); visibility: visible; }
.fb-sidebar-head {
  position: relative;
  padding: 24px 22px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(155deg, var(--green-soft), transparent 72%);
}
.fb-sidebar-head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--green), var(--green-dark));
}
.fb-sidebar-title { padding-right: 30px; }
.fb-eyebrow {
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 2.6px;
  color: var(--green-dark);
}
[data-theme="dark"] .fb-eyebrow { color: var(--green); }
.fb-sidebar-head h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.4px; }
.fb-desc { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.fb-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
}
.fb-close:hover { color: var(--text); border-color: var(--border-strong); }
.fb-sidebar-body { flex: 1; overflow-y: auto; padding: 20px 22px 26px; }
.fb-sidebar-foot {
  padding: 12px 22px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: .2px;
}

/* ---------- 登录 / 注册页 ---------- */
.auth-page {
  max-width: 460px;
  margin: 28px auto 60px;
  padding: 0 4px;
}
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 26px 24px;
  box-shadow: var(--shadow-md);
}
.auth-title {
  margin: 0 0 6px;
  font-size: 24px;
  letter-spacing: -.4px;
}
.auth-sub {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field > span { font-size: 12.5px; color: var(--muted); }
.auth-field input {
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}
.auth-field input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 16%, transparent);
}
.auth-form .btn { height: 42px; justify-content: center; }
.auth-msg {
  margin: 2px 0 0;
  min-height: 18px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.auth-banner {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent);
  color: color-mix(in srgb, var(--amber) 85%, var(--text));
  font-size: 12.5px;
  line-height: 1.6;
}

/* 预览模式下表单被禁用，视觉上要能看出来 */
.auth-card input:disabled,
.auth-card button:disabled,
.fb-form input:disabled,
.fb-form textarea:disabled,
.fb-form button:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.auth-alt {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.auth-alt a { color: var(--green-dark); }
[data-theme="dark"] .auth-alt a { color: var(--green); }

/* ---------- 账号信息 ---------- */
.auth-info {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 10px 12px;
  margin: 4px 0 22px;
  font-size: 14px;
}
.auth-info dt { color: var(--muted); font-size: 13px; }
.auth-info dd { margin: 0; color: var(--text); word-break: break-all; }

/* ---------- 账号页分段（改密 / 注销） ---------- */
.auth-sec {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-sec-title { margin: 0; font-size: 16px; letter-spacing: -.2px; }
.auth-sec-title.danger { color: var(--red); }
.auth-hint { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.auth-sec .btn { align-self: flex-start; min-width: 120px; justify-content: center; }
.btn.danger {
  background: transparent;
  border: 1px solid var(--red);
  color: var(--red);
}
.btn.danger:hover {
  background: color-mix(in srgb, var(--red) 10%, transparent);
  color: var(--red);
}

/* ---------- 反馈弹窗 ---------- */
.fb-modal { max-width: 520px; }
.fb-form { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.fb-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  letter-spacing: .2px;
}
.fb-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-form input[type="text"],
.fb-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}
.fb-form textarea { min-height: 110px; line-height: 1.6; }
.fb-form input[readonly] { color: var(--muted); }
.fb-form input:focus,
.fb-form textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 16%, transparent);
}
.fb-form .btn { margin-top: 10px; align-self: flex-start; min-width: 120px; justify-content: center; }

/* ---------- 反馈管理页 ---------- */
.auth-page.admin-page { max-width: 900px; }
.auth-admin-link { display: inline-flex; margin: 14px 0 4px; align-items: center; justify-content: center; }

.fb-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 18px;
}
.fb-stat {
  position: relative;
  overflow: hidden;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.fb-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--border-strong);
}
.fb-stat-total::before { background: var(--green); }
.fb-stat-0::before { background: var(--amber); }
.fb-stat-1::before { background: #3b82f6; }
.fb-stat-2::before { background: var(--green); }
.fb-stat-label { display: block; margin-bottom: 2px; color: var(--muted); font-size: 12px; }
.fb-stat-value { color: var(--text); font-size: 24px; line-height: 1.2; font-variant-numeric: tabular-nums; }

.fb-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.fb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.fb-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
}
.fb-tab:hover { color: var(--text); background: var(--surface); }
.fb-tab.active {
  background: var(--surface);
  color: var(--green-dark);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .fb-tab.active { color: var(--green); }
.fb-tab-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--border);
  color: var(--muted);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
.fb-tab.active .fb-tab-count { background: var(--green-soft); color: var(--green-dark); }
[data-theme="dark"] .fb-tab.active .fb-tab-count { color: var(--green); }
.fb-refresh {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 12.5px;
}
.fb-refresh:hover { border-color: var(--green); color: var(--text); }
.fb-refresh:disabled { opacity: .6; cursor: default; }

.fb-admin-list { display: flex; flex-direction: column; gap: 12px; }
.fb-admin-item {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.fb-item-pending { border-left-color: var(--amber); }
.fb-item-doing { border-left-color: #3b82f6; }
.fb-item-done { border-left-color: var(--green); }
.fb-item-muted { border-left-color: var(--border-strong); background: var(--surface-2); }
.fb-admin-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-kind {
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 600;
}
.fb-kind-bug { background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); border-color: color-mix(in srgb, var(--red) 25%, transparent); }
.fb-kind-idea { background: color-mix(in srgb, #3b82f6 10%, transparent); color: #2563eb; border-color: color-mix(in srgb, #3b82f6 25%, transparent); }
.fb-kind-content { background: color-mix(in srgb, var(--amber) 12%, transparent); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 25%, transparent); }
.fb-kind-other { background: var(--surface-2); color: var(--muted); }
.fb-status { padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.fb-status.pending { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber); }
.fb-status.doing { background: color-mix(in srgb, #3b82f6 14%, transparent); color: #2563eb; }
.fb-status.done { background: var(--green-soft); color: var(--green-dark); }
[data-theme="dark"] .fb-status.done { color: var(--green); }
.fb-status.muted { background: var(--surface-2); color: var(--muted); }
.fb-time { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.fb-admin-content {
  margin: 12px 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
}
.fb-admin-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 12.5px;
}
.fb-meta-row { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: start; }
.fb-meta-label { color: var(--muted); }
.fb-meta-value { color: var(--text-2); word-break: break-word; }
.fb-admin-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.fb-action-label { margin-right: 2px; color: var(--muted); font-size: 12px; }
.fb-mini {
  min-height: 30px;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 12px;
}
.fb-mini:hover { border-color: var(--green); color: var(--text); }
.fb-mini.active { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); font-weight: 600; }
[data-theme="dark"] .fb-mini.active { color: var(--green); }
.fb-empty {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding: 42px 20px;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
}
.fb-empty strong { color: var(--text-2); font-size: 14px; }
.fb-empty span { font-size: 12.5px; }

/* ---------- 移动端 ---------- */
@media (max-width: 900px) {
  .auth-slot { margin-left: 0; }
  .auth-link { padding: 6px 10px; font-size: 13px; }
  .auth-avatar { width: 30px; height: 30px; }
  .fb-sidebar { width: 100vw; border-left: 0; }
  .fb-sidebar-head { padding: 22px 18px 16px; }
  .fb-sidebar-body { padding: 18px 18px 22px; }
  .fb-sidebar-foot { padding: 11px 18px; }
  .fb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fb-toolbar { align-items: stretch; }
  .fb-tabs { width: 100%; }
  .fb-refresh { width: 100%; }
  .fb-admin-item { padding: 14px; }
  .fb-time { flex-basis: 100%; margin-left: 0; }
  .fb-action-label { flex-basis: 100%; }
  .fb-admin-actions .fb-mini { flex: 1 1 calc(50% - 6px); }
  .fb-meta-row { grid-template-columns: 58px 1fr; }
  .auth-page { margin: 16px auto 40px; }
  .auth-card { padding: 22px 18px 20px; border-radius: 14px; }
  .auth-title { font-size: 21px; }
  .auth-info { grid-template-columns: 72px 1fr; }
}

/* ============================================================
   登录/注册 · 游戏风主题（2026-11-13）
   深黑底 + 金色描边 + 微纹理，卡牌式悬浮
   ============================================================ */
.auth-page{max-width:480px;margin:34px auto 64px;position:relative}
.auth-page::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(900px 520px at 50% -12%, rgba(212,175,55,.12), transparent 62%),
    radial-gradient(760px 460px at 88% 108%, rgba(64,140,255,.09), transparent 62%),
    linear-gradient(180deg,#06080c,#0a0f15 55%,#070a0e);}
.auth-card{position:relative;padding:36px 30px 28px;border-radius:18px;
  background:linear-gradient(180deg,rgba(25,32,42,.97),rgba(13,18,25,.99));
  border:1px solid rgba(212,175,55,.30);
  box-shadow:0 24px 60px -22px rgba(0,0,0,.9), 0 0 70px -24px rgba(212,175,55,.28), inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;}
.auth-card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.016) 0 2px, transparent 2px 8px),
    radial-gradient(120% 62% at 50% -18%, rgba(212,175,55,.16), transparent 62%);}
.auth-card::after{content:"❖";position:absolute;top:0;left:50%;transform:translate(-50%,-48%);
  width:38px;height:38px;display:grid;place-items:center;font-size:14px;color:#151006;
  background:linear-gradient(160deg,#f6e2a0,#c9a340);border-radius:11px;
  box-shadow:0 6px 18px rgba(212,175,55,.4), inset 0 1px 0 rgba(255,255,255,.65);}
.auth-card>*{position:relative;z-index:1}
.auth-title{margin:6px 0 8px;font-size:26px;font-weight:750;letter-spacing:.6px;text-align:center;
  background:linear-gradient(180deg,#fff8de,#e8c96a 56%,#b98f2e);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.auth-sub{text-align:center;color:#8d9aac;margin-bottom:22px}
.auth-field>span{color:#9fb0c4;letter-spacing:.4px}
.auth-field input{height:44px;background:rgba(8,12,17,.92);border:1px solid rgba(140,160,185,.22);border-radius:11px;transition:.18s}
.auth-field input::placeholder{color:#5d6b7d}
.auth-field input:focus{border-color:rgba(226,196,106,.78);
  box-shadow:0 0 0 3px rgba(226,196,106,.13), 0 0 20px -8px rgba(226,196,106,.6)}
.auth-form .btn.primary{height:44px;border:none;border-radius:11px;font-weight:700;letter-spacing:.6px;
  color:#1a1408;background:linear-gradient(180deg,#f2d782,#c9a340);
  box-shadow:0 10px 26px -12px rgba(226,196,106,.8), inset 0 1px 0 rgba(255,255,255,.55)}
.auth-form .btn.primary:hover{filter:brightness(1.06);
  box-shadow:0 12px 32px -10px rgba(226,196,106,.9), inset 0 1px 0 rgba(255,255,255,.6)}
.auth-msg{color:#9aa8ba}
.auth-alt{text-align:center;color:#8b97a8}
.auth-alt a{color:#e2c46a;text-decoration:none}
.auth-alt a:hover{text-decoration:underline}
.auth-resend{margin-top:10px;width:100%;height:41px;border-radius:11px;font-weight:650;letter-spacing:.3px;
  color:#e8d08a;background:rgba(226,196,106,.06);border:1px solid rgba(226,196,106,.42)}
.auth-resend:hover{background:rgba(226,196,106,.12);border-color:rgba(226,196,106,.62)}
@media(max-width:480px){
  .auth-card{padding:30px 20px 22px}
  .auth-title{font-size:23px}
}