:root{
  --bg1:#f8fafc; /* light blue grey */
  --bg2:#e2e8f0; /* soft grey */
  --card:#ffffff;
  --card-stroke:#e2e8f0;
  --text:#1f2933;
  --muted:#64748b;
  --accent:#2563eb; /* blue */
  --accent2:#1d4ed8; /* deep blue */
  --danger:#dc2626; /* red */
  --success:#16a34a; /* green */
  --warning:#d97706; /* amber */

  --success-soft:#dcfce7;
  --success-strong:#166534;
  --warning-soft:#fef3c7;
  --warning-strong:#92400e;
  --danger-soft:#fee2e2;
  --danger-strong:#991b1b;
  --info-soft:#dbeafe;
  --info-strong:#1d4ed8;
  --muted-contrast:#475569;

  --primary:var(--accent);
  --primary-hover:var(--accent2);
  --primary-contrast:#ffffff;
  --primary-soft:#e0e7ff;

  --surface:#ffffff;
  --surface-soft:#f8fafc;
  --surface-alt:#edf2ff;
  --surface-muted:#e2e8f0;
  --border-soft:#d8dee9;
  --border-strong:#94a3b8;

  /* 抽象出常用“玻璃风格”与投影 */
  --glass-bg:var(--card);
  --glass-border:1px solid var(--card-stroke);
  --glass-filter:blur(8px) saturate(1.05);
  --glass-shadow:0 18px 40px rgba(15,23,42,.08);

  --chip-bg:#f1f5f9;
  --chip-border:1px solid #d8dee9;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,PingFang SC,Microsoft YaHei,sans-serif;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg, var(--bg1), var(--bg2));
}

a{ color:var(--info-strong); }
a:hover{ color:var(--accent2); }

/* 禁止图片捕获点击，避免误触打开原图 */
.img-no-click{
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

/* ===== 背景与容器 ===== */
.bg{
  position:fixed; inset:0;
  background:
    radial-gradient(800px 600px at 15% -10%, rgba(37,99,235,.18), transparent),
    radial-gradient(600px 400px at 90% 0%, rgba(29,78,216,.14), transparent),
    linear-gradient(135deg, var(--bg1), var(--bg2));
  filter:none;
}

.container{
  position:relative; z-index:1; min-height:100vh;
  display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
  gap:16px; padding:24px; max-width:1400px; margin:0 auto; width:100%;
}

.brand{ display:flex; align-items:center; gap:12px; margin-bottom:4px; user-select:none; justify-content:center; }
.brand .logo{
  width:36px; height:36px; display:grid; place-items:center; font-size:22px;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff; border-radius:10px; box-shadow:0 10px 24px rgba(15,23,42,.12);
}
.brand .title{ font-weight:700; letter-spacing:.5px }

/* ====== 通用“玻璃卡片”合并 ====== */
.card,
.admin-stats-grid .stat,
.stats-grid .stat,
.function-card{
  background:var(--glass-bg);
  border:var(--glass-border);
  border-radius:12px;
  backdrop-filter:var(--glass-filter);
  box-shadow:var(--glass-shadow);
}

/* 保持 card 自身差异（不与其它卡片混淆） */
.card{ width:100%; max-width:100%; border-radius:16px; padding:28px; }

@media (max-width: 768px) {
  .container {
    padding: 18px 14px;
  }

  .card {
    padding: 22px;
  }
}

@media (max-width: 520px) {
  .container {
    padding: 12px 10px;
  }

  .card {
    padding: 18px;
  }
}

@media (max-width: 400px) {
  .card {
    padding: 16px;
  }
}

/* ====== 标题/文案 ====== */
.card-title{ margin:0 0 12px; font-size:22px; letter-spacing:.3px }
.muted{ color:var(--muted); margin:0 0 16px }

/* ====== 表单：把 input 与 select 共有样式合并 ====== */
.form{ display:flex; flex-direction:column; gap:4px; margin-top:2px }
.field{ display:flex; flex-direction:row; align-items:center; gap:6px; margin-bottom:2px }
.field span{ font-size:13px; color:var(--muted); min-width:80px; text-align:right; flex-shrink:0 }

.annotation-form{
  gap:2px !important;
}

.annotation-form .field{
  margin:1px 0;
  gap:4px;
  flex-wrap:wrap;
}

.annotation-form .field span{
  min-width:68px;
  text-align:left;
  font-size:12px;
  color:var(--muted-contrast);
}

.annotation-form select,
.annotation-form input,
.annotation-form textarea{
  padding:6px 9px;
}

.field input,
.field select,
.field input[type="file"],
.field textarea{
  background:#f8fafc;
  border:1px solid #cbd5f5;
  color:var(--text);
  outline:none;
  padding:8px 10px;
  border-radius:8px;
  transition:.2s ease;
  flex:1;
}

/* 确保 textarea 文字颜色正确 */
textarea{
  color:var(--text) !important;
  font-family:inherit;
}
.field input::placeholder,
.field textarea::placeholder{ color:#94a3b8; opacity:1; }
.field input:focus,
.field select:focus,
.field textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(37,99,235,.18) }

/* select 的差异部分 */
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8cbe0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:right 8px center; background-size:14px; padding-right:32px;
  min-width:0;
}
.field select option{
  background:#ffffff !important;
  color:var(--text) !important;
  padding:8px 12px;
}
.field select option:first-child{
  color:#94a3b8 !important;
}
.field select option:hover{
  background:#eef2ff !important;
}
.field select option:checked{
  background:var(--accent) !important;
  color:white !important;
}

/* ====== 按钮 ====== */
.btn{
  appearance:none; border:0; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px;
  height:44px; padding:0 18px; border-radius:12px; color:var(--primary-contrast);
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  font-weight:600; letter-spacing:.2px;
  transition:.2s transform,.2s filter, .2s box-shadow;
  box-shadow:0 12px 26px rgba(15,23,42,.18);
  border:1px solid var(--accent2);
  text-shadow:0 1px 1px rgba(15,23,42,.25);
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 16px 30px rgba(15,23,42,.22) }
.btn:active{ transform:translateY(0) scale(.98) }
.btn:focus-visible{ outline:3px solid rgba(37,99,235,.35); outline-offset:2px; }
.btn:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; filter:none; }
.btn.primary{ background:linear-gradient(135deg, var(--accent), var(--accent2)) }
.btn.danger{ background:linear-gradient(135deg, var(--danger), #fb923c); border-color:#b91c1c; }
.btn.success{ background:linear-gradient(135deg, #22c55e, #16a34a); border-color:#15803d; }
.btn.warning{ background:linear-gradient(135deg, #f59e0b, #d97706); border-color:#b45309; }
.btn.info{ background:linear-gradient(135deg,#38bdf8,#2563eb); border-color:#1d4ed8; }
.btn-ghost{
  background:var(--surface-soft);
  color:var(--muted-contrast);
  border:1px solid var(--border-strong);
  box-shadow:0 8px 18px rgba(15,23,42,.12);
  text-shadow:none;
}
.btn-ghost:hover{
  filter:none;
  color:var(--primary);
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 12px 26px rgba(37,99,235,.18);
}
.btn-ghost:focus-visible{ outline:3px solid rgba(37,99,235,.25); outline-offset:2px; }
.btn-ghost:active{ transform:translateY(0) scale(.98); box-shadow:0 6px 14px rgba(15,23,42,.14); }
.btn-quiet{
  background:var(--primary-soft);
  color:var(--info-strong);
  border:1px solid rgba(37,99,235,.4);
  box-shadow:0 6px 16px rgba(37,99,235,.14);
}
.btn-quiet:hover{ background:#dbe4ff; filter:none; box-shadow:0 10px 22px rgba(37,99,235,.16); }
.btn-quiet:focus-visible{ outline:3px solid rgba(37,99,235,.25); outline-offset:2px; }

.surface-card,
.panel{
  background:var(--surface);
  border:1px solid rgba(148,163,184,.45);
  border-radius:12px;
  box-shadow:0 14px 28px rgba(15,23,42,.08);
}
.panel{ padding:16px; color:var(--text); }
.panel-header{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.panel-muted{
  background:var(--surface-soft);
  border:1px solid rgba(148,163,184,.55);
  border-radius:12px;
  padding:12px 16px;
  color:var(--muted-contrast);
  box-shadow:0 8px 20px rgba(15,23,42,.08);
}
.panel-muted strong{ color:var(--text); }
.panel-section{ background:var(--surface-soft); border:1px solid var(--border-soft); border-radius:10px; padding:12px; transition:border-color .2s ease, box-shadow .2s ease; }
.panel-section:hover{ border-color:var(--primary); box-shadow:0 10px 20px rgba(37,99,235,.14); }

.pill,
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  font-size:13px;
  background:var(--surface-soft);
  border:1px solid var(--border-soft);
  color:var(--text);
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.2px;
}
.badge-success{ background:var(--success-soft); color:var(--success-strong); border:1px solid rgba(22,163,74,.4); box-shadow:0 8px 18px rgba(22,163,74,.18); }
.badge-warning{ background:var(--warning-soft); color:var(--warning-strong); border:1px solid rgba(217,119,6,.4); box-shadow:0 8px 18px rgba(217,119,6,.16); }
.badge-neutral{ background:var(--surface-soft); color:var(--muted-contrast); border:1px solid rgba(148,163,184,.55); }
.badge-contrast{ background:var(--primary); color:var(--primary-contrast); border:1px solid var(--accent2); box-shadow:0 12px 24px rgba(37,99,235,.22); }
.pill-strong{ background:var(--primary); border-color:var(--primary); color:var(--primary-contrast); box-shadow:0 10px 20px rgba(37,99,235,.18); }

.pager{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pager-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  min-width:42px;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  background:var(--surface);
  border:1px solid rgba(148,163,184,.65);
  color:var(--muted-contrast);
  text-decoration:none;
  transition:all .2s ease;
  box-shadow:0 6px 16px rgba(15,23,42,.08);
  white-space:nowrap;
}
.pager-btn.pill{ border-radius:999px; padding:8px 18px; }
.pager-btn:hover{
  background:var(--surface-alt);
  border-color:var(--primary);
  color:var(--primary);
  box-shadow:0 10px 22px rgba(37,99,235,.16);
}
.pager-btn.is-active{
  background:var(--primary);
  border-color:var(--accent2);
  color:var(--primary-contrast);
  box-shadow:0 12px 26px rgba(37,99,235,.22);
}
.pager-btn.is-disabled{
  opacity:.65;
  cursor:not-allowed;
  pointer-events:none;
  background:var(--surface-soft);
  color:var(--muted);
  border-style:dashed;
  box-shadow:none;
}
.pager-btn.success{
  background:var(--success-soft);
  border-color:rgba(34,197,94,.45);
  color:var(--success-strong);
  box-shadow:0 10px 22px rgba(34,197,94,.18);
}
.pager-btn.success:hover{ background:#bbf7d0; color:var(--success-strong); border-color:#16a34a; }
.pager-btn:focus-visible{ outline:3px solid rgba(37,99,235,.25); outline-offset:2px; }

/* 移动端分页按钮样式 */
@media (max-width: 768px) {
  .pager-btn {
    font-size: 12px !important;
    padding: 5px 8px !important;
    min-width: auto !important;
  }
}

.cell-nav-buttons{
  display:flex;
  gap:8px;
  margin-top:4px;
  flex-wrap:wrap;
}
.cell-nav-buttons .pager-btn{
  flex:1;
  min-width:120px;
}
.cell-nav-buttons .confirm-annotation-btn{
  flex:0 0 auto;
  min-width:128px;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:var(--primary-contrast);
  border:1px solid transparent;
  box-shadow:0 12px 26px rgba(37,99,235,.22);
  padding:8px 16px;
}
.cell-nav-buttons .confirm-annotation-btn:hover{
  filter:brightness(1.05);
}
.cell-nav-buttons .confirm-annotation-btn:focus-visible{
  outline:3px solid rgba(37,99,235,.3);
  outline-offset:2px;
}

.pager-input{
  width:84px;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid rgba(148,163,184,.65);
  background:var(--surface-soft);
  color:var(--muted-contrast);
  font-size:14px;
  font-weight:600;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.pager-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.2); outline:none; }

.hint{ margin-top:12px; color:var(--muted); font-size:14px }
.hint a{ color:var(--accent); }

/* ====== 提示条 ====== */
.flash-list{ list-style:none; padding:0; margin:0 0 10px; display:flex; flex-direction:column; gap:8px }
.flash{ padding:10px 12px; border-radius:12px; background:#f8fafc; border:1px solid #d8dee9; color:var(--text); }
.flash.success{ border-color:rgba(22,163,74,.35); background:#ecfdf3; }
.flash.danger{ border-color:rgba(220,38,38,.35); background:#fef2f2; }
.flash.warning{ border-color:rgba(217,119,6,.35); background:#fffbeb; }
.flash.info{ border-color:rgba(37,99,235,.35); background:#eff6ff; }

/* ====== 统计卡（与功能卡共享玻璃基底，分开控制尺寸） ====== */
.stats{ display:flex; gap:16px; margin:12px 0 4px; flex-wrap:wrap; }
.stat{ padding:14px 16px; min-width:120px; flex:1; text-align:center }
.stat .num{ font-size:28px; font-weight:700 }
.stat .label{ color:var(--muted); font-size:13px }

/* ====== 操作区 ====== */
.actions{ display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
.actions .btn{ flex:1; min-width:120px; text-align:center; white-space:nowrap; }

/* ====== 表格 ====== */
.table-wrap{ overflow:auto; border-radius:12px; border:1px solid var(--border-soft); background:#ffffff }
.table{ width:100%; border-collapse:collapse; min-width:480px }
.table th,.table td{ padding:12px 14px; border-bottom:1px solid #e2e8f0; text-align:left; color:var(--text); }
.table thead th{ font-weight:600; color:var(--text); background:#f1f5f9 }
.table tbody tr:hover{ background:#f8fafc }

.footer{ margin-top:10px; color:var(--muted); font-size:12px; text-align:center }

@media (max-width:520px){
  .brand .title{ font-size:16px }
}

/* ====== 认证链接 ====== */
.auth-links{ position:fixed; right:16px; top:12px; z-index:9999; display:flex; gap:8px }
.auth-links a{ color:var(--text); text-decoration:none; opacity:.9; padding:6px 10px; border-radius:8px; background:var(--chip-bg); border:var(--chip-border) }
.auth-links a:hover{ background:#e2e8f0 }

/* ====== 用户下拉 ====== */
.user-menu{ position:fixed; right:16px; top:12px; z-index:9999 }
.user-btn{ appearance:none; background:var(--chip-bg); border:var(--chip-border); color:var(--text); padding:6px 10px; border-radius:8px; cursor:pointer }
.user-menu .menu{
  position:fixed; right:16px; top:48px; display:none; min-width:180px;
  background:#ffffff; border:1px solid #d8dee9;
  border-radius:12px; padding:6px; box-shadow:0 12px 32px rgba(15,23,42,.12);
}
.user-menu .menu a{ display:block; padding:8px 10px; border-radius:8px; margin:2px 0; color:var(--text); text-decoration:none }
.user-menu:hover .menu,
.user-menu:focus-within .menu{ display:block }

/* ====== 数据集网格 ====== */
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px }
.item .thumb{ aspect-ratio:1/1; overflow:hidden; border-radius:12px; border:1px solid #d8dee9; background:#f8fafc; display:grid; place-items:center }
.item .thumb img{ width:100%; min-height:100vh; object-fit:cover }
.item .meta{ margin-top:8px }

/* ====== 训练区 ====== */
.train-wrap{ display:flex; flex-direction:column; gap:12px }
.img-box{ border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.25) }
.img-box img{ width:100%; height:auto; display:block }
.choices{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px }
.choice{
  background:var(--surface-soft);
  border:1px solid rgba(148,163,184,.6);
  padding:8px 14px;
  border-radius:999px;
  color:var(--muted-contrast);
  font-weight:600;
  transition:all .2s ease;
}
.choice input{ accent-color:var(--accent2) }
.choices .choice:hover{ border-color:var(--accent); color:var(--primary); background:var(--surface-alt); box-shadow:0 6px 16px rgba(37,99,235,.14); }
label.card.item{ transition:.2s border-color,.2s background,.2s box-shadow; border:1px solid rgba(148,163,184,.55); background:var(--surface); box-shadow:0 8px 20px rgba(15,23,42,.08); }
label.card.item:hover{ border-color:var(--accent); box-shadow:0 12px 26px rgba(37,99,235,.16); }
label.card.item:has(input:checked){ border-color:var(--accent2); background:var(--info-soft); box-shadow:0 16px 32px rgba(37,99,235,.2); }
label.card.item:has(input:checked) .meta span{ color:var(--info-strong); }

.select{ height:44px; border-radius:12px; border:1px solid var(--border-soft); background:#ffffff; color:var(--text); padding:0 12px }

.container .card{ width:100%; max-width:none }

/* 表单页宽度 */
.container .card.form-page{ max-width:520px; margin:0 auto; }
.container .footer{ margin-bottom:12px }

/* ====== Dashboard 基础 ====== */
.dashboard-section{ margin-top:24px; }
.dashboard-section h3{ margin:0 0 16px; font-size:18px; color:var(--text); }

/* 横幅 */
.dashboard-banner{
  background:#ffffff;
  border-radius:16px;
  padding:24px;
  margin-bottom:24px;
  text-align:center;
  border:1px solid #d8dee9;
  box-shadow:0 14px 30px rgba(15,23,42,.08);
}
.dashboard-banner h1{ margin:0; font-size:28px; color:var(--text); font-weight:700; }
.dashboard-banner p{ margin:8px 0 0; color:var(--muted); font-size:16px; }

.dashboard-actions{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.action-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.action-grid .function-card{ min-height:170px; }

.primary-action-card{
  align-items:flex-start !important;
  text-align:left !important;
  padding:28px 32px !important;
  gap:12px;
  background:linear-gradient(135deg, rgba(59,130,246,.12), rgba(59,130,246,.03));
  border:1px solid rgba(59,130,246,.25);
  box-shadow:0 25px 45px rgba(15,23,42,.18);
}

.primary-action-card .icon{
  width:60px !important;
  height:60px !important;
  font-size:28px !important;
  margin:0 0 12px !important;
}

.primary-action-card h4{
  margin-bottom:8px !important;
  font-size:22px !important;
}

.primary-action-card p{
  font-size:15px !important;
  color:var(--muted-contrast);
  max-width:540px;
}

.primary-action-card .primary-cta{
  align-self:flex-start;
  font-size:16px;
  padding:14px 30px;
  min-width:220px;
  box-shadow:0 20px 35px rgba(59,130,246,.35);
}

@media (max-width:1200px){
  .action-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:768px){
  .primary-action-card{ padding:24px !important; }
  .primary-action-card .primary-cta{
    width:100%;
    text-align:center;
  }
}

@media (max-width:600px){
  .action-grid{ grid-template-columns:1fr; }
}

/* ====== 统计/功能网格（基础列数与公共卡片尺寸） ====== */
.admin-stats-grid,
.admin-function-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:20px;
  margin:0 auto 32px;
  max-width:1200px;
  justify-content:center;
}

/* 统计卡（admin 与通用 stats-grid 的基础样式统一在顶部已抽出） */
.admin-stats-grid .stat{ padding:16px; text-align:center; }
.stats-grid .stat{
  padding:20px; text-align:center; min-height:180px;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
}

/* 图标块：合并三处相同结构 */
.stats-grid .stat .icon,
.admin-stats-grid .stat .icon,
.function-card .icon{
  width:40px; height:40px; margin:0 auto 12px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:#fff; flex-shrink:0;
  box-shadow:0 8px 18px rgba(15,23,42,.12);
}

/* 数字与标签（两套尺寸） */
.stats-grid .stat .num{ font-size:32px; font-weight:700; color:var(--text); margin-bottom:8px; line-height:1; }
.stats-grid .stat .label{ color:var(--muted); font-size:14px; line-height:1.2; }

.admin-stats-grid .stat .icon{ width:36px; height:36px; margin:0 auto 10px; font-size:18px; }
.admin-stats-grid .stat .num{ font-size:28px; font-weight:700; color:var(--text); margin-bottom:4px; }
.admin-stats-grid .stat .label{ color:var(--muted); font-size:13px; }

/* 功能卡（玻璃基底已在顶部抽出） */
.function-card{
  padding:20px; text-align:center; transition:transform .2s ease, box-shadow .2s ease;
  min-height:180px; display:flex; flex-direction:column; justify-content:space-between; align-items:center;
}
.function-card:hover{ transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,.15) }
.function-card h4{ margin:0 0 8px; font-size:16px; color:var(--text); font-weight:700; line-height:1.2; }
.function-card p{ margin:0 0 16px; color:var(--muted); font-size:13px; line-height:1.4; flex-grow:1; display:flex; align-items:center; justify-content:center; }
.function-card .btn{ width:100%; padding:10px 12px; border-radius:8px; font-weight:600; text-decoration:none; display:inline-block; transition:all .2s ease; font-size:14px; margin-top:auto; }

/* 颜色变体（图标/按钮） */
.icon-blue{ background:linear-gradient(135deg,#3b82f6,#1d4ed8) }
.icon-green{ background:linear-gradient(135deg,#10b981,#059669) }
.icon-purple{ background:linear-gradient(135deg,#8b5cf6,#7c3aed) }
.icon-orange{ background:linear-gradient(135deg,#f59e0b,#d97706) }
.icon-teal{ background:linear-gradient(135deg,#14b8a6,#0d9488) }
.icon-red{ background:linear-gradient(135deg,#ef4444,#dc2626) }

.btn-blue{ background:linear-gradient(135deg,#3b82f6,#1d4ed8); color:#fff; }
.btn-green{ background:linear-gradient(135deg,#10b981,#059669); color:#fff; }
.btn-purple{ background:linear-gradient(135deg,#8b5cf6,#7c3aed); color:#fff; }
.btn-orange{ background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; }
.btn-teal{ background:linear-gradient(135deg,#14b8a6,#0d9488); color:#fff; }
.btn-red{ background:linear-gradient(135deg,#ef4444,#dc2626); color:#fff; }

/* 进度条 */
.progress-container{ margin-top:8px }
.progress-bar{ width:100%; height:8px; background:#e2e8f0; border-radius:4px; overflow:hidden }
.progress-fill{ height:100%; background:linear-gradient(90deg, var(--accent), var(--accent2)); border-radius:4px; transition:width .3s ease }

/* ====== 响应式（把相同列数设置合并） ====== */
@media (max-width:1200px){
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .function-grid{ grid-template-columns:repeat(2,1fr); }
  .admin-stats-grid{ grid-template-columns:repeat(3,1fr); max-width:900px; }
  .admin-function-grid{ grid-template-columns:repeat(3,1fr); max-width:900px; }
}
@media (max-width:900px){
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .function-grid{ grid-template-columns:repeat(2,1fr); }
  .admin-stats-grid{ grid-template-columns:repeat(2,1fr); max-width:600px; }
  .admin-function-grid{ grid-template-columns:repeat(2,1fr); max-width:600px; }
}
@media (max-width:768px){
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .function-grid{ grid-template-columns:1fr; }
  .admin-stats-grid{ grid-template-columns:repeat(2,1fr); max-width:500px; }
  .admin-function-grid{ grid-template-columns:1fr; max-width:300px; }
  .dashboard-banner h1{ font-size:24px; }
  .dashboard-banner p{ font-size:14px; }
  .dashboard-container{ padding:0 12px; }
  .function-card{ min-height:160px; }
}
@media (max-width:480px){
  .stats-grid{ grid-template-columns:1fr; }
  .admin-stats-grid{ grid-template-columns:1fr; max-width:280px; }
  .admin-function-grid{ grid-template-columns:1fr; max-width:280px; }
  .function-card{ padding:16px; min-height:140px; }
  .function-card .icon{ width:36px; height:36px; font-size:18px; }
  .dashboard-container{ padding:0 8px; }
}

/* 大屏优化 */
@media (min-width:1400px){
  .admin-stats-grid{ grid-template-columns:repeat(6,1fr); gap:16px; max-width:1400px; }
  .admin-function-grid{ grid-template-columns:repeat(6,1fr); gap:16px; max-width:1400px; }
  .stats-grid{ grid-template-columns:repeat(5,1fr); gap:20px; }
  .function-grid{ grid-template-columns:repeat(4,1fr); gap:20px; }
}
@media (min-width:1600px){
  .container{ padding:32px 60px; }
  .brand .title{ font-size:28px; }
}
@media (min-width:1800px){
  .admin-stats-grid{ grid-template-columns:repeat(7,1fr); gap:18px; max-width:1600px; }
  .admin-function-grid{ grid-template-columns:repeat(7,1fr); gap:18px; max-width:1600px; }
  .stats-grid{ grid-template-columns:repeat(6,1fr); gap:22px; }
  .function-grid{ grid-template-columns:repeat(5,1fr); gap:22px; }
}

/* ====== 宽屏文字细节 ====== */
@media (min-width:1200px){
  .container{ padding:24px 40px; }
  .brand{ font-size:18px; }
  .brand .title{ font-size:24px; }
}

/* ===================== Dashboard layout overrides（保留你的最终外观） ===================== */
.dashboard-container{
  width:100% !important;
  max-width:1400px;
  margin:24px auto 32px !important;
  padding:0 20px !important;
}
.dashboard-banner{
  margin:12px 0 24px !important;
  border-radius:16px !important;
  padding:24px !important;
}

/* 统计区固定5列并拉伸 */
.admin-stats-grid{
  display:grid !important; width:100% !important; max-width:none !important;
  margin:0 0 32px 0 !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:20px !important; justify-content:stretch !important; justify-items:stretch !important; align-items:stretch !important;
}
.admin-stats-grid .stat{
  padding:18px 16px !important; min-height:120px !important; border-radius:12px !important; text-align:center !important;
  display:flex !important; flex-direction:column !important; justify-content:center !important;
}
.admin-stats-grid .stat .icon{
  width:40px; height:40px; border-radius:8px;
  margin:0 auto 10px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0;
}
.admin-stats-grid .stat .num{ font-size:30px; font-weight:800; margin-bottom:2px; }
.admin-stats-grid .stat .label{ font-size:14px; opacity:.9; }

/* 管理功能固定5列并拉伸 */
.admin-function-grid{
  display:grid !important; width:100% !important; max-width:none !important;
  margin:16px 0 0 0 !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:16px !important; justify-content:stretch !important; justify-items:stretch !important; align-items:stretch !important;
}
.function-card{
  min-height:180px !important; padding:16px !important; border-radius:12px !important;
  display:flex !important; flex-direction:column !important; justify-content:space-between !important; text-align:center !important;
}
.function-card .icon{ width:36px; height:36px; border-radius:8px; margin:0 auto 10px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.function-card h4{ margin:0 0 6px; font-size:15px; font-weight:700; }
.function-card p{ margin:0 0 12px; font-size:12px; line-height:1.45; flex-grow:1; display:flex; align-items:center; justify-content:center; }
.function-card .btn{ width:100%; padding:9px 10px; border-radius:8px; font-size:13px; }

/* 响应式列数（仅列数变动） */
@media (max-width:1200px){
  .admin-stats-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .admin-function-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
@media (max-width:900px){
  .admin-stats-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .admin-function-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:600px){
  .admin-stats-grid, .admin-function-grid{ grid-template-columns:1fr !important; }
}

/* 学习控制台上下两行卡片对齐修复（统一宽度/间距/高度） */
.stats-grid, .function-grid{
  display:grid !important; width:100% !important; max-width:none !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:20px !important;
  justify-content:stretch !important; justify-items:stretch !important; align-items:stretch !important;
}
.stats-grid .stat, .function-card{
  border-radius:12px !important; padding:16px !important; min-height:170px !important;
  display:flex !important; flex-direction:column !important; justify-content:space-between !important; text-align:center !important;
}
.stats-grid .stat .icon, .function-card .icon{
  width:36px; height:36px; border-radius:8px; margin:0 auto 10px;
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.stats-grid .stat .num{ font-size:28px; font-weight:800; margin:2px 0 4px; }
.stats-grid .stat .label, .function-card p{ font-size:12px; line-height:1.45; }

@media (max-width:1024px){
  .stats-grid, .function-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:600px){
  .stats-grid, .function-grid{ grid-template-columns:1fr !important; }
}

/* ====== 返回按钮 ====== */
.back-button{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--accent); text-decoration:none; opacity:.9;
  padding:6px 10px; border-radius:8px;
  background:#eef2ff; border:1px solid #c7d2fe;
  font-size:14px; margin-bottom:8px; transition:all 0.2s ease;
}
.back-button:hover{
  opacity:1; background:#e0e7ff;
  transform:translateX(-2px);
}
.back-button::before{ content:"←"; font-size:16px; }
.status-badge{ position:absolute; top:12px; right:12px; z-index:2; }
.status-badge.sm{ top:4px; right:4px; padding:2px 8px; font-size:11px; }

/* 移动端返回按钮样式 */
@media (max-width: 768px) {
  .back-button {
    font-size: 13px !important;
    padding: 5px 8px !important;
    margin-bottom: 12px !important;
  }
  .back-button::before {
    font-size: 14px !important;
  }
}

/* ====== Page shells & shared cards ====== */
.page-shell{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.page-header{
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:center;
}

.page-title{
  margin:0;
  font-size:26px;
  font-weight:700;
  color:var(--text);
}

.page-subtitle{
  margin:0;
  color:var(--muted);
  font-size:15px;
}

.section-card{
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:16px;
  padding:24px;
  box-shadow:0 18px 40px rgba(15,23,42,.08);
}

.section-card .section-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}

.section-card .section-heading h3{
  margin:0;
  font-size:20px;
  color:var(--text);
}

.section-card .section-heading .muted{
  margin:0;
}

.section-description{
  margin:0 0 16px;
  color:var(--muted);
  font-size:14px;
}

.section-divider{
  height:1px;
  background:var(--border-soft);
  margin:12px 0 20px;
}

/* ====== Summary metrics ====== */
.summary-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
}

.summary-card{
  background:var(--surface-soft);
  border:1px solid var(--border-soft);
  border-radius:14px;
  padding:18px;
  display:flex;
  align-items:center;
  gap:14px;
  box-shadow:0 12px 26px rgba(15,23,42,.08);
}

.summary-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:20px;
  color:#fff;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow:0 10px 22px rgba(37,99,235,.22);
}

.summary-icon.green{
  background:linear-gradient(135deg, #22c55e, #15803d);
  box-shadow:0 10px 22px rgba(34,197,94,.2);
}

.summary-icon.purple{
  background:linear-gradient(135deg, #8b5cf6, #7c3aed);
  box-shadow:0 10px 22px rgba(139,92,246,.22);
}

.summary-icon.orange{
  background:linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow:0 10px 22px rgba(245,158,11,.22);
}

.summary-content{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.summary-value{
  font-size:24px;
  font-weight:700;
  color:var(--text);
  line-height:1;
}

.summary-label{
  font-size:13px;
  color:var(--muted);
}

/* ====== Empty states ====== */
.empty-state{
  text-align:center;
  padding:48px 16px;
  background:var(--surface-soft);
  border:1px dashed var(--border-soft);
  border-radius:16px;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  color:var(--muted-contrast);
}

.empty-icon{
  font-size:48px;
}

.empty-state h3{
  margin:0;
  font-size:20px;
  color:var(--text);
}

.empty-state p{
  margin:0;
  font-size:14px;
  color:var(--muted);
}

/* ====== Dataset list ====== */
.dataset-page .page-shell{ gap:24px; }

.dataset-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:20px;
}

.dataset-card{
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(15,23,42,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}

.dataset-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 46px rgba(15,23,42,.14);
}

.dataset-preview{
  position:relative;
  height:200px;
  background:var(--surface-soft);
  display:flex;
  align-items:center;
  justify-content:center;
}

.dataset-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.dataset-placeholder{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--muted-contrast);
  font-weight:600;
}

.dataset-placeholder .placeholder-icon{
  font-size:40px;
}

.dataset-placeholder .placeholder-text{
  font-size:16px;
}

.modes-badges{
  position:absolute;
  top:12px;
  right:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.mode-badge{
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  color:#fff;
  box-shadow:0 8px 18px rgba(15,23,42,.16);
}

.mode-badge.mode-a{ background:linear-gradient(135deg,#22c55e,#15803d); }
.mode-badge.mode-b{ background:linear-gradient(135deg,#3b82f6,#2563eb); }
.mode-badge.mode-c{ background:linear-gradient(135deg,#f59e0b,#d97706); }

.dataset-info{
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.dataset-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:12px;
}

.dataset-title{
  margin:0;
  font-size:20px;
  font-weight:700;
  color:var(--text);
}

.dataset-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.meta-tag{
  background:var(--primary-soft);
  color:var(--accent2);
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
}

.meta-date{
  font-size:12px;
  color:var(--muted);
}

.dataset-description{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

.dataset-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:12px;
}

.dataset-stats .stat-item{
  background:var(--surface-soft);
  border:1px solid var(--border-soft);
  border-radius:12px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:4px;
  text-align:center;
  box-shadow:0 8px 20px rgba(15,23,42,.06);
}

.dataset-stats .stat-label{
  font-size:12px;
  color:var(--muted);
}

.dataset-stats .stat-value{
  font-size:16px;
  font-weight:700;
  color:var(--text);
}

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

.dataset-actions .btn{
  flex:1;
  min-width:140px;
}

/* ====== Gallery view ====== */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:18px;
}

.gallery-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px;
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:14px;
  box-shadow:0 14px 32px rgba(15,23,42,.08);
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}

.gallery-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 38px rgba(37,99,235,.16);
  border-color:var(--accent);
}

.gallery-card .gallery-thumb{
  position:relative;
  height:150px;
  overflow:hidden;
  border-radius:10px;
  background:var(--surface-soft);
  display:flex;
  align-items:center;
  justify-content:center;
}

.gallery-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .2s ease;
}

.gallery-card:hover img{
  transform:scale(1.04);
}

.gallery-placeholder{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--muted);
}

.gallery-info{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}

.gallery-name{
  font-size:14px;
  font-weight:600;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.gallery-meta{
  font-size:12px;
  color:var(--muted);
}

.gallery-pager{
  justify-content:center;
}

.pager-meta{
  color:var(--muted-contrast);
  font-size:14px;
  font-weight:600;
  padding:8px 14px;
}

/* ====== Image viewer modal ====== */
.image-viewer-modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.75);
  z-index:9999;
  padding:24px;
  box-sizing:border-box;
}

.image-viewer-modal.show{
  display:flex !important;
  align-items:center;
  justify-content:center;
}

.viewer-modal-content{
  width:min(92vw, 1000px);
  height:80vh;
  max-height:720px;
  background:var(--surface);
  border-radius:16px;
  border:1px solid var(--border-soft);
  box-shadow:0 28px 70px rgba(15,23,42,.35);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.viewer-modal-header,
.viewer-modal-footer{
  padding:16px 20px;
  background:var(--surface-soft);
  border-bottom:1px solid var(--border-soft);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.viewer-modal-footer{
  border-bottom:none;
  border-top:1px solid var(--border-soft);
}

.viewer-title{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.viewer-title span:first-child{
  font-size:16px;
  font-weight:600;
  color:var(--text);
}

.viewer-title span:last-child{
  font-size:12px;
  color:var(--muted);
}

.viewer-close-btn{
  width:32px;
  height:32px;
  border-radius:8px;
  border:1px solid transparent;
  background:var(--danger);
  color:#fff;
  font-size:16px;
  cursor:pointer;
  transition:transform .2s ease, filter .2s ease;
  display:flex;
  align-items:center;
  justify-content:center;
}

.viewer-close-btn:hover{
  filter:brightness(.95);
  transform:scale(1.05);
}

.viewer-modal-body{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:var(--surface);
  min-height:0;
  overflow:hidden;
}

.viewer-image-wrap{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  max-height:100%;
  overflow:auto;
}

.viewer-img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  transition:transform .2s ease;
  cursor:grab;
  border-radius:6px;
  box-shadow:0 8px 24px rgba(15,23,42,.18);
  transform-origin:center center;
}

.viewer-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.control-btn{
  width:40px;
  height:40px;
  border-radius:8px;
  border:1px solid var(--border-soft);
  background:var(--surface);
  color:var(--muted-contrast);
  font-size:16px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.control-btn:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  box-shadow:0 8px 20px rgba(37,99,235,.16);
  color:var(--accent2);
}

.control-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.control-separator{
  width:1px;
  height:24px;
  background:var(--border-soft);
}

/* ====== Modal base ====== */
.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.55);
  z-index:9999;
  padding:24px;
  box-sizing:border-box;
  min-height:100vh;
  overflow-y:auto;
}

.modal.show{
  display:flex;
  align-items:center;
  justify-content:center;
}

.modal-content{
  width:min(640px, 100%);
  max-height:90vh;
  background:var(--surface);
  border-radius:16px;
  border:1px solid var(--border-soft);
  box-shadow:0 30px 80px rgba(15,23,42,.25);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  outline:none;
}

.modal-content.modal-wide{
  width:min(1000px, calc(100vw - 96px));
  max-width:1100px;
}

@media (min-width:1440px){
  .modal-content.modal-wide{
    max-width:1200px;
  }
}

.modal-content:focus-visible{
  outline:3px solid rgba(37,99,235,.35);
  outline-offset:0;
}

.modal-header{
  padding:20px 24px;
  border-bottom:1px solid var(--border-soft);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.modal-header h2,
.modal-header h3{
  margin:0;
  font-size:20px;
  color:var(--text);
}

.modal-close,
.close-btn,
.close{
  background:none;
  border:none;
  color:var(--muted-contrast);
  font-size:24px;
  cursor:pointer;
  transition:color .2s ease, transform .2s ease;
}

.modal-close:hover,
.close-btn:hover,
.close:hover{
  color:var(--danger);
  transform:scale(1.05);
}

.modal-body{
  padding:24px;
  overflow:auto;
}

.modal-footer{
  padding:16px 24px;
  border-top:1px solid var(--border-soft);
  background:var(--surface-soft);
}

.modal-empty{
  text-align:center;
  padding:40px 20px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
}

.modal-emoji{
  font-size:48px;
}

/* Dataset modal details */
.dataset-details{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.detail-section{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.detail-title{
  margin:0;
  font-size:18px;
  font-weight:700;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:8px;
}

.detail-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
}

.detail-item{
  background:var(--surface-soft);
  border:1px solid var(--border-soft);
  border-radius:10px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:4px;
  box-shadow:0 8px 20px rgba(15,23,42,.06);
}

.detail-label{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.5px;
}

.detail-value{
  font-size:15px;
  font-weight:600;
  color:var(--text);
}

.detail-description{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

.detail-list{
  display:grid;
  gap:10px;
}

.detail-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:10px;
  background:var(--surface-soft);
  border:1px solid var(--border-soft);
}

.detail-row strong{
  color:var(--text);
}

.detail-row span{
  color:var(--muted);
}

/* ====== Progress dashboard ====== */
.progress-detail{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.progress-meter{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.progress-meter .meter-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.progress-meter .meter-title{
  margin:0;
  font-size:18px;
  font-weight:600;
  color:var(--text);
}

.progress-meter .meter-value{
  font-size:16px;
  font-weight:600;
  color:var(--success-strong);
}

.progress-meter .progress-bar{
  height:12px;
  border-radius:999px;
}

.progress-meter .progress-fill{
  border-radius:999px;
  background:linear-gradient(90deg, #22c55e, #15803d);
}

.progress-meter .progress-percentage{
  text-align:center;
  font-size:14px;
  font-weight:600;
  color:var(--success-strong);
}

.dataset-progress-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
}

.dataset-progress-card{
  background:var(--surface-soft);
  border:1px solid var(--border-soft);
  border-radius:14px;
  padding:16px;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.dataset-progress-card .section-heading{
  margin-bottom:8px;
}

.dataset-progress-card h4{
  margin:0;
  font-size:18px;
  color:var(--text);
}

.dataset-progress-card .muted{
  margin:0;
  font-size:12px;
}

.mode-progress-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:12px;
}

.mode-progress-card{
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:12px;
  padding:14px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:10px;
  box-shadow:0 8px 20px rgba(15,23,42,.06);
}

.mode-progress-card .mode-label{
  font-size:13px;
  font-weight:600;
  color:var(--muted-contrast);
}

.mode-progress-card .mode-count{
  font-size:18px;
  font-weight:700;
  color:var(--text);
}

.mode-progress-card .mode-percentage{
  font-size:12px;
  color:var(--muted);
}

.mode-progress-card .progress-bar{
  height:8px;
}

.mode-progress-card.mode-a .progress-fill{
  background:linear-gradient(90deg,#3b82f6,#1d4ed8);
}

.mode-progress-card.mode-b .progress-fill{
  background:linear-gradient(90deg,#8b5cf6,#7c3aed);
}

.mode-progress-card.mode-c .progress-fill{
  background:linear-gradient(90deg,#f59e0b,#d97706);
}

.tab-nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}

.tab-button{
  appearance:none;
  border:1px solid var(--border-soft);
  background:var(--surface-soft);
  color:var(--muted-contrast);
  padding:8px 16px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:all .2s ease;
}

.tab-button:hover{
  border-color:var(--accent);
  color:var(--accent2);
  box-shadow:0 8px 20px rgba(37,99,235,.16);
}

.tab-button.is-active{
  background:var(--primary);
  border-color:var(--accent2);
  color:var(--primary-contrast);
  box-shadow:0 12px 26px rgba(37,99,235,.22);
}

.tab-content{ display:none; }
.tab-content.is-active{ display:block; }

.metrics-overview{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:12px;
  margin-bottom:16px;
}

.metrics-overview .metric{
  background:var(--surface-soft);
  border:1px solid var(--border-soft);
  border-radius:12px;
  padding:14px;
  text-align:center;
  box-shadow:0 8px 20px rgba(15,23,42,.06);
}

.metrics-overview .metric-label{
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}

.metrics-overview .metric-value{
  font-size:18px;
  font-weight:700;
  color:var(--text);
}

.metric-value.positive{ color:var(--success-strong); }
.metric-value.info{ color:var(--accent2); }
.metric-value.warning{ color:var(--warning-strong); }

.metric-tips{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
}

.metric-tip{
  border-radius:12px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  background:var(--surface-soft);
  border-left:4px solid var(--accent);
  box-shadow:0 8px 20px rgba(15,23,42,.06);
}

.metric-tip.success{
  background:var(--success-soft);
  border-left-color:var(--success-strong);
}

.metric-tip.warning{
  background:var(--warning-soft);
  border-left-color:var(--warning-strong);
}

.metric-tip.info{
  background:var(--info-soft);
  border-left-color:var(--accent2);
}

.metric-tip.teal{
  background:linear-gradient(135deg, rgba(45,212,191,.16), rgba(13,148,136,.08));
  border-left-color:#0d9488;
}

.metric-tip.positive{
  background:linear-gradient(135deg, rgba(34,197,94,.16), rgba(34,197,94,.08));
  border-left-color:#15803d;
}

.metric-tip strong{
  font-size:14px;
  color:var(--text);
}

.metric-tip span{
  font-size:13px;
  color:var(--muted-contrast);
}

.metric-tip small{
  font-size:12px;
  color:var(--muted);
}

.metrics-table{
  width:100%;
  border-collapse:collapse;
  background:var(--surface);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(15,23,42,.08);
}

.metrics-table th,
.metrics-table td{
  padding:12px 14px;
  border-bottom:1px solid var(--border-soft);
  text-align:center;
  color:var(--text);
  font-size:13px;
}

.metrics-table th{
  background:var(--surface-soft);
  font-weight:700;
}

.metrics-table tbody tr:last-child td{
  border-bottom:none;
}

.metric-chip{
  font-weight:700;
}

.metric-chip.good{ color:var(--success-strong); }
.metric-chip.mid{ color:var(--warning-strong); }
.metric-chip.bad{ color:var(--danger-strong); }

/* ====== Wrong question review ====== */
.filter-card{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.filter-options{
  display:flex;
  flex-direction:column;
  gap:12px;
  color:var(--muted-contrast);
}

.checkbox-container{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  font-size:14px;
  color:var(--text);
}

.checkbox-container input{
  width:18px;
  height:18px;
  accent-color:var(--accent2);
}

.filter-description{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.wrong-summary{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
}

.wrong-summary .summary-card{
  background:var(--surface);
}

.dataset-mode-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
}

.dataset-mode-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px;
  border-radius:14px;
  background:var(--surface);
  border:1px solid var(--border-soft);
  text-decoration:none;
  color:inherit;
  box-shadow:0 14px 32px rgba(15,23,42,.08);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.dataset-mode-card:hover{
  transform:translateY(-3px);
  border-color:var(--accent);
  box-shadow:0 20px 44px rgba(37,99,235,.18);
}

.dataset-mode-card .card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.dataset-mode-card h4{
  margin:0;
  font-size:18px;
  font-weight:700;
  color:var(--text);
}

.mode-chip{
  padding:4px 10px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--accent2);
  font-size:12px;
  font-weight:600;
}

.dataset-mode-card .card-description{
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}

.dataset-mode-card .view-button{
  color:var(--accent2);
  font-weight:600;
}

.wrong-count .summary-value{
  font-size:22px;
}

.wrong-questions-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
}

.wrong-question-card{
  padding:16px;
  border-radius:14px;
  background:var(--surface);
  border:1px solid var(--border-soft);
  box-shadow:0 14px 32px rgba(15,23,42,.08);
  display:flex;
  flex-direction:column;
  gap:12px;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.wrong-question-card:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  box-shadow:0 20px 44px rgba(37,99,235,.16);
}

.question-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.question-id{
  font-weight:600;
  color:var(--text);
}

.status-chip{
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  color:#fff;
}

.status-chip.wrong{ background:linear-gradient(135deg,#ef4444,#b91c1c); }
.status-chip.correct{ background:linear-gradient(135deg,#22c55e,#15803d); }

.question-content{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.image-preview{
  width:96px;
  height:96px;
  flex-shrink:0;
  border-radius:12px;
  overflow:hidden;
  background:var(--surface-soft);
  border:1px solid var(--border-soft);
  display:flex;
  align-items:center;
  justify-content:center;
}

.image-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.question-info{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}

.info-row{
  display:flex;
  gap:6px;
  align-items:flex-start;
  font-size:13px;
}

.info-row .label{
  color:var(--muted);
  flex-shrink:0;
}

.info-row .value{
  font-weight:600;
  color:var(--text);
}

.info-row .value.wrong{ color:var(--danger-strong); }
.info-row .value.correct{ color:var(--success-strong); }
.info-row .value.model{ color:var(--accent2); white-space:pre-line; }

.modal-layout{
  display:grid;
  grid-template-columns:minmax(220px, .85fr) minmax(320px, 1.1fr) minmax(320px, 1fr);
  gap:24px;
  align-items:flex-start;
}

.modal-left,
.modal-center,
.modal-right{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

@media (max-width:1200px){
  .modal-layout{
    grid-template-columns:minmax(220px, 1fr) minmax(320px, 1.2fr);
  }

  .modal-right{
    grid-column:1 / -1;
  }
}

@media (max-width:900px){
  .modal-layout{
    grid-template-columns:1fr;
  }

  .modal-right{
    grid-column:auto;
  }
}

.image-stage{
  position:relative;
  width:100%;
  min-height:200px;
  border-radius:12px;
  background:var(--surface-soft);
  border:1px solid var(--border-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.image-stage.big{ min-height:280px; }

.image-stage img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:none;
}

.image-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.image-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:8px;
  background:var(--surface-soft);
  color:var(--muted-contrast);
  font-weight:600;
  text-align:center;
}

.bounding-box{
  position:absolute;
  border:2px solid var(--danger-strong);
  border-radius:8px;
  box-shadow:0 0 0 1px rgba(239,68,68,.18);
}

.annotation-layout{
  display:grid;
  grid-template-columns:280px minmax(0,1fr) 320px;
  grid-template-areas:"sidebar viewer details";
  gap:8px;
  margin-top:12px;
  min-height:calc(100vh - 200px);
}

.annotation-pane{
  background:var(--surface);
  border-radius:12px;
  border:1px solid rgba(148,163,184,.45);
  box-shadow:0 14px 30px rgba(15,23,42,.12);
  padding:16px;
  min-height:0;
}

.annotation-sidebar{
  grid-area:sidebar;
  overflow-y:auto;
  max-height:calc(100vh - 240px);
  padding:12px;
}

.annotation-title{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  width:100%;
}
.annotation-title-context{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.annotation-mode-tag{
  display:inline-flex;
  align-items:center;
  color:var(--text);
  font-size:22px;
  font-weight:700;
  letter-spacing:.3px;
  margin-left:8px;
}
.annotation-title-nav{
  margin-left:auto;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
  flex-shrink:0;
}
.annotation-title-nav .pager-btn{
  min-width:78px;
  padding:6px 12px;
}

@media (max-width: 640px){
  .annotation-title{
    flex-wrap:nowrap;
  }
  .annotation-title-context{
    display:none;
  }
  .annotation-mode-tag{
    margin-left:0;
    font-size:18px;
  }
}

.annotation-viewer{
  grid-area:viewer;
  display:flex;
  flex-direction:column;
  gap:8px;
  box-shadow:0 18px 36px rgba(15,23,42,.12);
}

.annotation-viewer-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:0;
  padding:4px;
}

.group-summary-text,
.group-summary-progress{
  font-size:12px;
  line-height:1.4;
}
.group-summary-text{
  letter-spacing:.2px;
  font-weight:600;
  color:var(--text);
}
.group-summary-progress{
  color:var(--muted);
}

.annotation-stage{
  flex:1;
  position:relative;
  border-radius:8px;
  background:#000;
  overflow:hidden;
  min-height:440px;
}

.annotation-stage img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  cursor:crosshair;
}

.annotation-stage #coordinate-overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.annotation-details{
  grid-area:details;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:calc(100vh - 240px);
  overflow-y:auto;
  box-shadow:0 14px 32px rgba(15,23,42,.12);
  padding:12px;
}

.annotation-details-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:0 0 4px;
  padding:2px 0;
}

@media (max-width:1400px){
  .annotation-layout{
    grid-template-columns:240px minmax(0,1fr) 300px;
  }
}

@media (max-width:1200px){
  .annotation-layout{
    grid-template-columns:minmax(0,1fr) minmax(320px, 0.9fr);
    grid-template-areas:
      "viewer viewer"
      "sidebar details";
    min-height:auto;
  }
  .annotation-sidebar{ max-height:360px; }
  .annotation-details{ max-height:none; }
}

@media (max-width:960px){
  .annotation-layout{
    grid-template-columns:1fr;
    grid-template-areas:
      "viewer"
      "details"
      "sidebar";
    gap:12px;
  }
  .annotation-pane,
  .annotation-sidebar,
  .annotation-details{
    max-height:none;
  }
  .annotation-stage{ min-height:320px; }
}

@media (max-width:768px){
  .annotation-viewer-header{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width:600px){
  .annotation-stage{ min-height:260px; }
}

.annotation-info{
  display:grid;
  gap:16px;
  align-items:stretch;
  justify-content:stretch;
  grid-auto-flow:dense;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}

@media (min-width:1024px){
  .annotation-info{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

.info-section.learning,
.info-section.model{ grid-column:1 / -1; }

.info-section{
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:12px;
  padding:12px;
  box-shadow:0 8px 20px rgba(15,23,42,.06);
  display:flex;
  flex-direction:column;
  gap:8px;
}

.info-section h5{
  margin:0 0 8px;
  font-size:14px;
  color:var(--muted-contrast);
}

.annotation-value{
  font-size:15px;
  font-weight:700;
  padding:8px 10px;
  border-radius:8px;
  background:var(--surface-soft);
  color:var(--text);
}

.annotation-value.wrong{ color:var(--danger-strong); background:var(--danger-soft); }
.annotation-value.correct{ color:var(--success-strong); background:var(--success-soft); }
.annotation-value.model{ color:var(--accent2); background:var(--info-soft); white-space:pre-line; }

.learning-tip{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  color:var(--muted-contrast);
}

/* ====== Responsive tweaks ====== */
@media (max-width:768px){
  .page-shell{ gap:20px; }
  .section-card{ padding:20px; }
  .dataset-actions{ flex-direction:column; }
  .dataset-actions .btn{ width:100%; }
  .viewer-modal-content{ width:95vw; height:85vh; }
  .viewer-modal-header,
  .viewer-modal-footer{ padding:12px 16px; }
  .viewer-close-btn{ width:30px; height:30px; }
  .modal{ padding:16px; }
  .modal-content{ width:100%; }
}

@media (max-width:520px){
  .summary-grid,
  .dataset-grid,
  .gallery-grid,
  .dataset-mode-grid,
  .wrong-questions-grid,
  .dataset-progress-grid,
  .mode-progress-grid{
    grid-template-columns:1fr;
  }
  .question-content{ flex-direction:column; }
  .image-preview{ width:100%; height:180px; }
}

/* ====== 移动端标注界面优化 ====== */
@media (max-width: 768px) {
  /* 标注页面标题缩小 */
  .card-title {
    font-size: 18px !important;
    margin-bottom: 8px !important;
  }
  
  /* 标注布局间距调整 */
  .annotation-layout {
    gap: 4px !important;
    margin-top: 6px !important;
  }
  
  .annotation-pane {
    padding: 10px !important;
  }

  .annotation-details {
    gap: 4px !important;
  }
  
  /* 小图选择区域间距调整 */
  .annotation-sidebar h3 {
    margin-bottom: 10px !important;
    font-size: 14px !important;
  }
  
  .small-image-item {
    padding: 6px !important;
    margin-bottom: 4px !important;
  }
  
  /* 大图显示区域标题间距调整 */
  .annotation-viewer-header {
    margin-bottom: 6px !important;
    padding: 4px !important;
  }
  
  .annotation-viewer-header h3 {
    font-size: 14px !important;
  }
  
  /* 标注信息区域间距调整 */
  .annotation-details-header {
    margin-bottom: 2px !important;
    padding: 2px 0 !important;
  }
  
  .annotation-details-header h3 {
    font-size: 14px !important;
  }
  
  /* 表单字段间距调整 - 进一步压缩 */
  .form {
    gap: 4px !important;
  }
  
  .field {
    margin-bottom: 0 !important;
    gap: 6px !important;
  }
  
  .field span {
    font-size: 12px !important;
    min-width: 70px !important;
  }
  
  .annotation-form .field {
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
  }
  
  .annotation-form .field span {
    text-align: left !important;
    min-width: 64px !important;
  }
  
  /* 按钮组间距调整 */
  .cell-nav-buttons {
    margin-top: 4px !important;
    gap: 6px !important;
  }
  
  .cell-nav-buttons .pager-btn {
    min-width: 90px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  .cell-nav-buttons .confirm-annotation-btn{
    min-width: 110px !important;
    padding: 6px 10px !important;
  }
  
  /* 结果对比区域间距调整 */
  #comparison-container {
    margin-top: 6px !important;
  }
  
  #model-prediction-display,
  #last-choice-display {
    margin-bottom: 6px !important;
    padding: 10px !important;
  }
  
  /* 下一题按钮间距调整 - 最小化空隙 */
  #next-question-button {
    margin-top: 4px !important;
  }
  
  /* 返回按钮样式调整 */
  .back-button {
    font-size: 13px !important;
    padding: 5px 8px !important;
  }
  
  /* 分页按钮样式调整 */
  .pager-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
    min-height: auto !important;
  }
  
  /* 标注页面标题中的模式文字大小调整 */
  .card-title span {
    font-size: 18px !important;
  }
}

/* 更小屏幕的额外优化 */
@media (max-width: 480px) {
  .card-title {
    font-size: 16px !important;
  }
  
  .annotation-layout {
    gap: 3px !important;
  }
  
  .annotation-pane {
    padding: 8px !important;
  }
  
  .field {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  
  .field span {
    min-width: 65px !important;
  }
  
  .field select {
    width: auto !important;
  }
  
  /* 进一步压缩表单垂直间距 */
  .form {
    gap: 3px !important;
  }
  
  .annotation-details-header {
    margin-bottom: 2px !important;
  }
  
  #comparison-container {
    margin-top: 4px !important;
  }
  
  #next-question-button {
    margin-top: 2px !important;
  }
  
  /* 更小屏幕下的模式文字大小 */
  .card-title span {
    font-size: 16px !important;
  }
  
  .annotation-form .field {
    flex-direction: row !important;
    align-items: center !important;
  }
  
  .annotation-form .field span {
    min-width: 58px !important;
    text-align: left !important;
  }
}

/* ====== Leaderboard ====== */
.rank-form-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.rank-combo-list{ display:flex; flex-direction:column; gap:14px; margin:12px 0 8px; }
.combo-row{ border:1px solid var(--border-soft); border-radius:14px; padding:14px; background:var(--surface); box-shadow:0 10px 24px rgba(15,23,42,.08); }
.combo-entries{ display:flex; flex-wrap:wrap; gap:12px; }
.combo-entry{ display:grid; gap:10px; min-width:200px; flex:1 1 220px; }
.combo-actions{ margin-top:12px; display:flex; justify-content:flex-end; }
.rank-combo-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:8px 0 18px; }
.rank-form-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
.btn-sm{ height:36px; padding:0 12px; border-radius:10px; font-size:13px; }
.combo-chip{ display:inline-flex; align-items:center; gap:4px; padding:6px 10px; border-radius:999px; background:var(--surface-soft); border:1px solid var(--border-soft); font-size:12px; color:var(--text); margin:4px 6px 4px 0; }
.inline-form{ display:inline-flex; }
.table-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.leaderboard-header{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.leaderboard-selector{ display:flex; align-items:flex-end; gap:12px; }
.leaderboard-selector .field{ min-width:220px; }
.leaderboard-note{ margin:12px 0 4px; color:var(--muted); font-size:13px; }
.leaderboard-table tbody tr.is-me{ background:#eef2ff; }
.leaderboard-table tbody tr.is-me td{ font-weight:600; }
.leaderboard-table tbody tr.flash{ animation:rowFlash 1.2s ease; }
@keyframes rowFlash{ 0%{ background:#fde68a; } 100%{ background:inherit; } }