/*******************************
* 文件名：user.css
* 创建时间：2026-09-25
* 作者：DHPro
* 功能描述：前台用户中心独立样式（B 方案内容区）
*     挂载模板色彩变量（--moyu-* 等），缺失时回退默认蓝主色
*     适配深色（html[data-theme=dark]）与 440px 移动端
*******************************/
.user-shell{
  --user-primary: var(--moyu-primary, #165dff);
  --user-primary-dark: var(--moyu-primary, #0e45c7);
  --user-muted: var(--moyu-muted, #86909c);
  --user-border: var(--moyu-border, #e2e8f0);
  --user-panel: var(--moyu-panel, #ffffff);
  --user-bg: #f6f8fa;
  --user-text: #1f2329;
  --user-green: #16a34a;
  --user-red: #e5484d;
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 16px 48px;
  font-size: 14px;
  color: var(--user-text);
  line-height: 1.6;
}
html[data-theme="dark"] .user-shell{
  --user-panel: #1e2633;
  --user-bg: #141a24;
  --user-text: #e6e8eb;
  --user-border: #30394a;
  --user-muted: #98a1af;
}

/* ---------- 提示 ---------- */
.user-alert{
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 13px;
}
.user-alert-error{ background:#fde8e8; color:#c53030; border:1px solid #f5c2c2; }
.user-alert-success{ background:#e6f7ec; color:#18794e; border:1px solid #b7e6c6; }
html[data-theme="dark"] .user-alert-error{ background:#3a2323; color:#f6a5a5; }
html[data-theme="dark"] .user-alert-success{ background:#173d28; color:#7ad0a0; }

/* ---------- 登录/注册卡片 ---------- */
.user-auth{
  max-width: 420px;
  margin: 24px auto;
  background: var(--user-panel);
  border: 1px solid var(--user-border);
  border-radius: 12px;
  padding: 28px 28px 22px;
  box-shadow: 0 6px 24px rgba(20,30,50,.06);
}
.user-auth-head{ text-align:center; margin-bottom: 22px; }
.user-auth-head h1{ font-size: 22px; margin: 0 0 6px; font-weight: 600; }
.user-auth-head p{ margin: 0; color: var(--user-muted); font-size: 13px; }

.user-form label{
  display: block;
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--user-text);
}
.user-form input{
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--user-border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--user-bg);
  color: var(--user-text);
  outline: none;
  transition: border-color .2s;
}
.user-form input:focus{ border-color: var(--user-primary); }
.user-captcha{
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 6px;
  background: var(--user-bg);
  border: 1px dashed var(--user-border);
  font-family: Consolas,Menlo,monospace;
  color: var(--user-primary);
}

.user-btn{
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  margin-top: 8px;
  padding: 11px 18px;
  border: none;
  border-radius: 8px;
  background: var(--user-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s;
}
.user-btn:hover{ background: var(--user-primary-dark); }
.user-btn-sm{ width: auto; padding: 7px 14px; font-size: 13px; margin-top: 0; }
.user-btn-ghost{
  background: transparent;
  color: var(--user-primary);
  border: 1px solid var(--user-border);
  width: auto;
  padding: 5px 12px;
  font-size: 12px;
  margin-top: 0;
}
.user-btn-ghost:hover{ border-color: var(--user-primary); background: transparent; }
.user-btn-danger{
  background: transparent;
  color: var(--user-red);
  border: 1px solid var(--user-border);
  width: auto;
  padding: 5px 12px;
  font-size: 12px;
  margin-top: 0;
}
.user-btn-danger:hover{ border-color: var(--user-red); }

.user-auth-foot{
  margin: 18px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--user-muted);
}
.user-auth-foot a{ color: var(--user-primary); text-decoration: none; }

/* ---------- 个人中心 ---------- */
.user-center{ max-width: 980px; }
.user-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.user-top-user{ display: flex; align-items: center; gap: 12px; }
.user-avatar{
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--user-primary);
  color: #fff;
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.user-top-user strong{ display: block; font-size: 16px; }
.user-top-user span{ color: var(--user-muted); font-size: 12px; }
.user-top-nav a{
  margin-left: 16px;
  color: var(--user-primary);
  text-decoration: none;
  font-size: 14px;
}

.user-balance-card{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: linear-gradient(135deg, var(--user-primary), #6c5ce7);
  color: #fff;
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 16px;
}
.user-balance-label{ font-size: 14px; opacity: .9; display: block; }
.user-balance-num{ font-size: 40px; font-weight: 700; line-height: 1.1; margin-right: 8px; }
.user-balance-tip{ display: block; font-size: 12px; opacity: .85; margin-top: 4px; }
.user-balance-card .user-btn{
  width: auto;
  margin-top: 0;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
}
.user-balance-card .user-btn:hover{ background: rgba(255,255,255,.3); }

.user-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.user-stat-item{
  background: var(--user-panel);
  border: 1px solid var(--user-border);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
}
.user-stat-item strong{ display: block; font-size: 26px; color: var(--user-primary); }
.user-stat-item span{ font-size: 13px; color: var(--user-muted); }

.user-card{
  background: var(--user-panel);
  border: 1px solid var(--user-border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
.user-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.user-card-head h2{ margin: 0; font-size: 16px; font-weight: 600; }
.user-key-create{ display: flex; gap: 8px; }
.user-key-create input{
  width: 180px;
  padding: 7px 12px;
  border: 1px solid var(--user-border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--user-bg);
  color: var(--user-text);
  outline: none;
}
.user-empty{ color: var(--user-muted); font-size: 13px; padding: 10px 0; margin: 0; }

.user-key-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--user-border);
}
.user-key-item:first-child{ border-top: none; }
.user-key-info strong{ display: block; font-size: 14px; }
.user-key-info code{
  font-family: Consolas,Menlo,monospace;
  font-size: 12px;
  color: var(--user-primary);
  background: var(--user-bg);
  padding: 2px 8px;
  border-radius: 6px;
}
.user-key-info span{ color: var(--user-muted); font-size: 12px; margin-left: 8px; }
.user-key-ops{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.user-key-state{
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 20px;
}
.user-key-state.on{ background:#e6f7ec; color:#18794e; }
.user-key-state.off{ background:#fde8e8; color:#c53030; }
html[data-theme="dark"] .user-key-state.on{ background:#173d28; color:#7ad0a0; }
html[data-theme="dark"] .user-key-state.off{ background:#3a2323; color:#f6a5a5; }
.user-inline-form{ margin: 0; }

.user-tabs{ display: flex; gap: 4px; margin-bottom: 12px; }
.user-tab{
  padding: 6px 16px;
  border: 1px solid var(--user-border);
  background: transparent;
  border-radius: 8px 8px 0 0;
  font-size: 13px;
  cursor: pointer;
  color: var(--user-muted);
  border-bottom: none;
}
.user-tab.on{ color: var(--user-primary); background: var(--user-bg); font-weight: 500; }
.user-tab-panel{ display: none; }
.user-tab-panel.on{ display: block; }

.user-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.user-table th{
  text-align: left;
  padding: 8px 10px;
  color: var(--user-muted);
  font-weight: 500;
  border-bottom: 1px solid var(--user-border);
}
.user-table td{
  padding: 9px 10px;
  border-bottom: 1px solid var(--user-border);
}
.user-table td code{
  font-family: Consolas,Menlo,monospace;
  font-size: 12px;
  background: var(--user-bg);
  padding: 2px 6px;
  border-radius: 4px;
}
.user-points-plus{ color: var(--user-green); font-weight: 600; }
.user-points-minus{ color: var(--user-red); font-weight: 600; }

/* ---------- 移动端 440px ---------- */
@media (max-width: 480px){
  .user-shell{ padding: 20px 12px 36px; }
  .user-auth{ padding: 22px 18px 18px; }
  .user-stats{ grid-template-columns: 1fr; }
  .user-key-item{ flex-direction: column; align-items: stretch; }
  .user-key-ops{ justify-content: flex-start; }
  .user-key-create{ width: 100%; flex-wrap: wrap; }
  .user-key-create input{ width: 100%; }
  .user-top{ justify-content: flex-start; }
  .user-table{ display: block; overflow-x: auto; }
}