/* ==================== 登录页 ==================== */
.auth-body {
  min-height: 100vh; display: flex; justify-content: center;
  padding: 36px 24px; box-sizing: border-box;
}
/* 左介绍 + 右登录框 */
.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: 52px; align-items: center;
  width: 100%; max-width: 940px;
  margin: auto 0;          /* 空间不足时不裁切，足够时垂直居中 */
}
.auth-card {
  position: relative; width: 100%;
  padding: 26px 24px 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel-grad);
  box-shadow: 0 30px 80px -50px var(--shadow-color), 0 0 0 1px var(--tint) inset;
  animation: rise .4s cubic-bezier(.2, .7, .3, 1) both;
}
.auth-brand {
  font-family: var(--serif); font-size: 26px; letter-spacing: .06em; color: var(--text);
}
.auth-brand span { color: var(--accent); }
.auth-title {
  margin: 0; font-family: var(--serif); font-size: 17px; font-weight: 600;
  letter-spacing: .14em; color: var(--text);
}
.auth-sub {
  margin: 6px 0 20px; font-size: 10px; letter-spacing: .06em; color: var(--dim);
}

/* ---- 左侧系统介绍 ---- */
.intro { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.intro .auth-brand { font-size: 34px; }
.intro-tagline {
  margin: 8px 0 0; font-family: var(--mono); font-size: 10px;
  letter-spacing: .2em; color: var(--accent); text-transform: uppercase;
}
.intro-desc {
  margin: 14px 0 0; max-width: 46ch;
  font-size: 14px; line-height: 1.85; color: var(--muted);
}
.intro-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.intro-list li {
  display: grid; grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px; align-items: baseline;
  padding-left: 12px; border-left: 1px solid var(--line);
  transition: border-color .2s;
}
.intro-list li:hover { border-left-color: var(--accent); }
.intro-list b {
  font-size: 14px; font-weight: 600; letter-spacing: .08em; color: var(--text);
}
.intro-list span { font-size: 14px; line-height: 1.65; color: var(--dim); }
.intro-stats {
  display: flex; gap: 30px; flex-wrap: wrap;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.intro-stats .stat { display: flex; flex-direction: column; gap: 4px; }
.intro-stats b {
  font-family: var(--serif); font-size: 23px; font-weight: 600;
  letter-spacing: .02em; color: var(--accent); line-height: 1;
}
.intro-stats span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  color: var(--dim); white-space: nowrap;
}
.auth-field { display: block; margin-bottom: 14px; }
.auth-field > span:first-child {
  display: block; margin-bottom: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--dim);
}
.auth-field input {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel-2);
  color: var(--text); font: inherit; font-size: 14px; letter-spacing: .04em;
  outline: none; transition: border-color .15s, background .15s;
}
.auth-field input:focus { border-color: var(--accent); background: var(--panel-3); }
.cap-row { display: flex; gap: 10px; align-items: center; }
.cap-row input { width: 96px; flex: none; letter-spacing: .3em; text-transform: uppercase; }
.cap-img {
  height: 40px; width: 116px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel-3); display: block;
}
.cap-img:hover { border-color: var(--accent); }
.auth-submit { width: 100%; margin-top: 6px; justify-content: center; }
.auth-msg {
  margin: 12px 0 0; font-size: 10px; letter-spacing: .04em; color: var(--muted);
  border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px;
  background: var(--tint);
}
.auth-msg.err { color: var(--err); border-color: var(--err-line); background: var(--err-soft); }
.auth-foot {
  margin: 20px 0 0; text-align: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--dim);
}

/* ==================== 主题切换（自动 / 明亮 / 暗色） ==================== */
.theme-switch {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; border-radius: 999px; flex: none;
  border: 1px solid var(--line); background: var(--tint);
}
.theme-switch button {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border: none; border-radius: 999px;
  background: transparent; color: var(--dim);
  font: inherit; font-size: 10px; letter-spacing: .04em;
  cursor: pointer; transition: color .15s, background .15s;
}
.theme-switch button:hover { color: var(--text); }
.theme-switch button.active { color: var(--accent); background: var(--accent-soft); }
.theme-switch svg { width: 13px; height: 13px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-switch .lbl { display: none; }
@media (min-width: 1280px) { .theme-switch .lbl { display: inline; } }
.intro-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* ==================== 顶部用户信息 ==================== */
.user-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 3px 4px 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--tint);
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--muted);
}
.user-chip .dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none;
}
.quota-tag { color: var(--accent); }
.quota-tag.empty { color: var(--err); }

/* ==================== 管理后台 ==================== */
.admin-main {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 16px 18px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.admin-tabs { display: flex; gap: 6px; }
.admin-tab {
  padding: 6px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: transparent;
  color: var(--muted); font: inherit; font-size: 14px; letter-spacing: .04em;
  transition: .15s;
}
.admin-tab:hover { color: var(--text); border-color: var(--line-strong); }
.admin-tab.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

.admin-panel { display: flex; flex-direction: column; gap: 12px; }
.admin-card {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--dropzone-bg); padding: 14px 16px;
}
.admin-card h3 {
  margin: 0 0 12px; font-family: var(--serif); font-weight: 600;
  font-size: 14px; letter-spacing: .1em; color: var(--text);
}
.admin-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 14px;
}
/* 接口配置：一行一个，纵向堆叠 */
.admin-form { display: flex; flex-direction: column; gap: 15px; }
.admin-form .admin-field { max-width: 620px; }
.admin-form .admin-field input { width: 100%; }
.admin-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.admin-field > span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--dim);
}
.admin-field input, .admin-field select {
  width: 100%; box-sizing: border-box;
  padding: 7px 9px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--panel-2);
  color: var(--text); font: inherit; font-size: 14px;
  outline: none; transition: border-color .15s;
}
.admin-field input:focus, .admin-field select:focus { border-color: var(--accent); }
.admin-field .tip { font-size: 10px; color: var(--dim); letter-spacing: .04em; }
.admin-actions { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.admin-msg { font-size: 10px; letter-spacing: .04em; color: var(--muted); }
.admin-msg.ok { color: var(--accent); }
.admin-msg.err { color: var(--err); }

.table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td {
  padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.admin-table th {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  color: var(--dim); font-weight: 500; text-transform: uppercase;
}
.admin-table td { color: var(--muted); }
.admin-table tr:hover td { background: var(--tint); }
.admin-table .mono { font-family: var(--mono); font-size: 14px; }
.admin-table .name { color: var(--text); letter-spacing: .04em; }
.admin-table input[type="number"], .admin-table input[type="text"] {
  width: 74px; padding: 4px 6px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--panel-2);
  color: var(--text); font: inherit; font-size: 14px; outline: none;
}
.admin-table input[type="text"] { width: 120px; }
.admin-table input:focus { border-color: var(--accent); }

.badge {
  display: inline-block; padding: 1px 7px; border-radius: 5px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  border: 1px solid var(--line-strong); color: var(--muted);
}
.badge.admin { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }
.badge.off { color: var(--err); border-color: var(--err-line); }
.badge.on { color: var(--muted); }

.admin-thumbs { display: flex; gap: 6px; }
.admin-thumbs img {
  width: 40px; height: 40px; object-fit: cover; border-radius: 5px;
  border: 1px solid var(--line); display: block; background: var(--media-bg);
}
.admin-records { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.admin-record {
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  background: var(--panel-2); cursor: pointer;
}
.admin-record img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: contain; background: var(--media-bg); }
.admin-record .ar-body { padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
.admin-record .ar-name {
  font-family: var(--mono); font-size: 14px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-record .ar-sub { font-family: var(--mono); font-size: 10px; color: var(--dim); }

@media (max-width: 820px) {
  .admin-main { padding: 12px; }
  .admin-card { padding: 12px; }
}

/* 窄屏：介绍在上、登录框在下 */
@media (max-width: 900px) {
  .auth-body { padding: 24px 18px; }
  .auth-shell { grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 398px; }
  .intro { gap: 15px; }
  .intro .auth-brand { font-size: 26px; }
  .intro-desc { margin-top: 10px; font-size: 14px; line-height: 1.75; }
  .intro-list { gap: 8px; }
  .intro-list li { grid-template-columns: 74px minmax(0, 1fr); gap: 10px; padding-left: 10px; }
  .intro-list b, .intro-list span { font-size: 14px; }
  .intro-stats { gap: 18px; padding-top: 12px; }
  .intro-stats b { font-size: 19px; }
  .intro-stats span { font-size: 10px; }
}

/* 矮屏（笔记本横屏）压缩介绍间距，保证登录框完整可见 */
@media (max-height: 720px) and (min-width: 901px) {
  .intro { gap: 14px; }
  .intro-desc { margin-top: 10px; line-height: 1.7; }
  .intro-list { gap: 7px; }
  .intro-stats { padding-top: 12px; }
}