/* ============================================================
   Custom Soul 控制台专属样式
   依赖 tokens.css + style.css
   ============================================================ */

/* ---------------------------------------------------------- 页面标题区 */
.page-head { padding: var(--sp-8) 0 var(--sp-6); }
.page-head h1 { font-size: 24px; margin-bottom: 6px; }
.page-head p { color: var(--text-muted); font-size: 14.5px; }

/* ---------------------------------------------------------- 登录 / 注册 */
.auth-wrap {
  min-height: calc(100vh - var(--header-h));
  display: grid; place-items: center; padding: var(--sp-8) var(--sp-4);
  background: linear-gradient(180deg, var(--brand-50) 0%, var(--bg-page) 55%);
}
.auth-card { width: 100%; max-width: 400px; }
.auth-card .card-body { padding: var(--sp-8); }
.auth-tabs {
  display: flex; gap: var(--sp-1); padding: 4px;
  background: var(--bg-subtle); border-radius: var(--r-md); margin-bottom: var(--sp-6);
}
.auth-tabs button {
  flex: 1; padding: 8px; border: none; background: transparent;
  border-radius: var(--r-sm); font-size: 14px; font-weight: 600;
  color: var(--text-muted); cursor: pointer; transition: all .15s;
}
.auth-tabs button.active {
  background: var(--white); color: var(--brand-600); box-shadow: var(--sh-xs);
}

/* ---------------------------------------------------------- 统计卡 */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-4); }
.stat {
  background: var(--white); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: var(--sp-5);
}
.stat .stat-label { font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px; }
.stat .stat-value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.stat .stat-sub { font-size: 12px; color: var(--text-faint); margin-top: 4px; }

/* ---------------------------------------------------------- 拖拽上传 */
.dropzone {
  border: 2px dashed var(--border); border-radius: var(--r-lg);
  padding: var(--sp-10) var(--sp-6); text-align: center;
  background: var(--bg-subtle); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone:hover { border-color: var(--brand-300); background: var(--brand-50); }
.dropzone.dragover { border-color: var(--brand-500); background: var(--brand-50); }
.dropzone .dz-icon { font-size: 36px; opacity: .5; margin-bottom: var(--sp-3); }
.dropzone .dz-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.dropzone .dz-hint { font-size: 13px; color: var(--text-muted); }
.dropzone input[type=file] { display: none; }

.file-picked {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4); background: var(--white);
  border: 1px solid var(--border); border-radius: var(--r-md);
  margin-top: var(--sp-4);
}
.file-picked .fp-name { font-weight: 600; font-size: 14px; word-break: break-all; }
.file-picked .fp-meta { font-size: 12.5px; color: var(--text-muted); }

/* ---------------------------------------------------------- 校验结果 */
.check-list { margin: 0; padding: 0; list-style: none; }
.check-list li {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  padding: 7px 0; font-size: 13.5px; border-bottom: 1px solid var(--border-soft);
}
.check-list li:last-child { border-bottom: none; }
.check-list .ck { flex: none; font-size: 14px; line-height: 1.5; }

/* ---------------------------------------------------------- API Key */
.key-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.key-row:last-child { border-bottom: none; }
.key-mono {
  font-family: var(--font-mono); font-size: 13px;
  background: var(--bg-code); padding: 3px 8px; border-radius: var(--r-xs);
}

/* 新建密钥展示框（明文只显示一次） */
.newkey-box {
  border: 1px solid var(--brand-200); background: var(--brand-50);
  border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-5);
}
.newkey-value {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--white); border: 1px solid var(--brand-200);
  border-radius: var(--r-md); padding: 11px 13px; margin: var(--sp-3) 0;
}
.newkey-value code {
  font-family: var(--font-mono); font-size: 13.5px; flex: 1;
  word-break: break-all; color: var(--brand-700); font-weight: 600;
}

/* ---------------------------------------------------------- 进度条 */
.progress {
  height: 6px; background: var(--ink-100);
  border-radius: var(--r-full); overflow: hidden; margin-top: var(--sp-3);
}
.progress > i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
  border-radius: var(--r-full); transition: width .2s;
}

/* ---------------------------------------------------------- Toast */
.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 16px);
  background: var(--ink-900); color: #fff;
  padding: 11px 20px; border-radius: var(--r-md);
  font-size: 14px; box-shadow: var(--sh-lg);
  opacity: 0; transition: opacity .22s, transform .22s;
  z-index: 9999; max-width: min(90vw, 460px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-ok  { background: var(--ok-700); }
.toast-err { background: var(--err-700); }
.toast-warn { background: var(--warn-700); }

/* ---------------------------------------------------------- 骨架屏 */
.skeleton {
  background: linear-gradient(90deg, var(--ink-100) 25%, var(--ink-50) 50%, var(--ink-100) 75%);
  background-size: 200% 100%;
  animation: sk 1.4s ease-in-out infinite;
  border-radius: var(--r-sm); height: 14px;
}
@keyframes sk {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------------------------------------------------------- 管理后台 */
.tabs {
  display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-5); flex-wrap: wrap;
}
.tabs button {
  padding: 9px 16px; border: none; background: transparent;
  font-size: 14px; font-weight: 600; color: var(--text-muted);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--brand-600); border-bottom-color: var(--brand-500); }

.filters { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-4); }
.filters .input, .filters .select { width: auto; min-width: 150px; }

.actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------------------------------------------------------- 移动端 */
@media (max-width: 720px) {
  .page-head { padding: var(--sp-6) 0 var(--sp-4); }
  .page-head h1 { font-size: 21px; }
  .auth-card .card-body { padding: var(--sp-6); }
  .stat .stat-value { font-size: 22px; }
  .dropzone { padding: var(--sp-8) var(--sp-4); }
}