/* =====================================================================
   作业与论文智能批改系统 — 暗蓝科技风主题
   ===================================================================== */
* { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg: #070d1f;                 /* 页面深空蓝黑 */
  --bg2: #0a1428;
  --panel: rgba(14, 24, 48, .82);/* 卡片玻璃拟态 */
  --panel-solid: #101b36;
  --border: #1e2c4f;
  --border-glow: #2c4fa0;
  --text: #dbe6ff;
  --muted: #7f93bd;
  --primary: #3b82f6;            /* 电光蓝 */
  --primary2: #22d3ee;           /* 青 */
  --primary-dark: #1d4ed8;
  --good: #34d399;
  --warn: #fbbf24;
  --fix: #7aa2ff;
  --danger: #f87171;
  --chip-bg: rgba(59,130,246,.10);
}

html, body { background: var(--bg); }
body {
  font-family:"Microsoft YaHei","PingFang SC","Segoe UI",sans-serif;
  color:var(--text);
  min-height:100vh;
  background:
    radial-gradient(1000px 500px at 85% -10%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(800px 500px at -10% 0%, rgba(59,130,246,.12), transparent 55%),
    linear-gradient(180deg,#070d1f 0%, #0a1428 55%, #060b19 100%);
  background-attachment: fixed;
}

/* ---------- 顶栏 ---------- */
.topbar {
  position:relative;
  background:linear-gradient(90deg,#0b1530 0%, #0d1f45 50%, #0b1530 100%);
  padding:14px 28px;
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid rgba(59,130,246,.35);
  box-shadow:0 4px 24px rgba(29,78,216,.28), inset 0 0 0 1px rgba(255,255,255,.02);
}
.topbar::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent, rgba(34,211,238,.7), transparent);
}
.brand { display:flex; align-items:center; gap:12px; }
.logo {
  position:relative;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:19px;color:#04102b;
  box-shadow:0 0 18px rgba(59,130,246,.7);
}
.brand h1 {
  font-size:19px; font-weight:600; letter-spacing:1px;
  background:linear-gradient(90deg,#fff, #8fc1ff);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.health { display:flex; align-items:center; gap:8px; font-size:13px; color:#93a8d4; }
.dot { width:9px; height:9px; border-radius:50%; background:#f0b429; box-shadow:0 0 8px #f0b429; }
.dot.ok { background:#34d399; box-shadow:0 0 8px #34d399; }
.dot.err { background:#f87171; box-shadow:0 0 8px #f87171; }

/* ---------- 布局 ---------- */
.container {
  display:grid;
  grid-template-columns: 400px 1fr;
  gap:20px;
  padding:20px 26px;
  max-width:1540px;
  margin:0 auto;
}
@media (max-width:980px){ .container{ grid-template-columns:1fr; } }

.panel {
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px;
  backdrop-filter:blur(10px);
  box-shadow:0 10px 34px rgba(2,8,26,.55), inset 0 0 0 1px rgba(255,255,255,.02);
}
.config-panel { align-self:start; position:sticky; top:16px; }
@media (max-width:980px){ .config-panel{ position:static; } }

h2 { font-size:15px; margin:0 0 10px; color:var(--primary2); }
.config-panel h2 { margin-top:22px; display:flex; align-items:center; gap:8px; }
.config-panel h2:first-child { margin-top:0; }
.config-panel h2::before {
  content:""; width:4px; height:14px; border-radius:2px;
  background:linear-gradient(180deg,var(--primary),var(--primary2));
  box-shadow:0 0 8px rgba(59,130,246,.8);
}

select, textarea {
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  font-size:14px;
  font-family:inherit;
  background:rgba(7,16,38,.85);
  color:var(--text);
  transition:border-color .15s, box-shadow .15s;
}
select:focus, textarea:focus {
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(59,130,246,.22), 0 0 14px rgba(34,211,238,.25);
}
textarea { resize:vertical; }
select option { background:#0e1b3a; color:#dbe6ff; }

.hint { color:var(--muted); font-size:12px; line-height:1.6; margin-top:6px; }

/* ---------- Tab 切换 ---------- */
.tabs { display:flex; gap:8px; margin-bottom:14px; padding:4px; background:rgba(7,14,32,.7); border:1px solid var(--border); border-radius:12px; }
.tab-btn {
  flex:1; padding:10px; border:none; border-radius:9px;
  background:transparent; color:#8fa6d8; font-size:14px; font-weight:600;
  cursor:pointer; transition:all .2s; font-family:inherit;
}
.tab-btn.active {
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#04102b; font-weight:700;
  box-shadow:0 0 16px rgba(59,130,246,.55);
}
.tab-btn:hover:not(.active){ color:#cfe0ff; background:rgba(59,130,246,.12); }
.tab-content { animation:fadeIn .2s ease; }

/* ---------- 维度 chip ---------- */
.dims-list { margin-top:10px; }
.dim-chip {
  display:flex; justify-content:space-between; align-items:center;
  background:var(--chip-bg);
  border:1px solid rgba(59,130,246,.22);
  border-radius:9px; padding:7px 11px; margin-bottom:6px; font-size:13px;
  transition:border-color .15s;
}
.dim-chip:hover { border-color:var(--primary); }
.dim-chip .dim-name { font-weight:600; color:#dbe6ff; }
.dim-chip .dim-desc { color:var(--muted); font-weight:400; font-size:11px; margin-left:6px; }
.dim-chip .dim-weight {
  color:var(--primary2); font-weight:700;
  background:rgba(34,211,238,.12); padding:1px 8px; border-radius:8px; font-size:12px;
}

/* ---------- 上传区 ---------- */
.upload-zone {
  border:2px dashed #2a3f73;
  border-radius:12px;
  padding:22px 12px;
  text-align:center;
  cursor:pointer;
  transition:all .18s;
  background:rgba(8,17,40,.6);
}
.upload-zone:hover, .upload-zone.drag {
  border-color:var(--primary2);
  background:rgba(34,211,238,.06);
  box-shadow:0 0 20px rgba(34,211,238,.18), inset 0 0 0 1px rgba(34,211,238,.2);
}
.upload-icon { font-size:32px; display:block; margin-bottom:6px; filter:drop-shadow(0 0 8px rgba(59,130,246,.6)); }
.upload-inner p { font-size:14px; }
.file-name { margin-top:8px; font-size:13px; color:var(--primary2); font-weight:600; word-break:break-all; }

/* ---------- 按钮 ---------- */
.primary-btn, .secondary-btn {
  width:100%;
  padding:13px;
  border:none;
  border-radius:11px;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  margin-top:18px;
  transition:all .18s;
  font-family:inherit;
  letter-spacing:1px;
}
.primary-btn {
  color:#04102b;
  background:linear-gradient(135deg,var(--primary) 0%, var(--primary2) 100%);
  box-shadow:0 4px 18px rgba(59,130,246,.45);
}
.primary-btn:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 6px 26px rgba(34,211,238,.55);
}
.primary-btn:disabled { background:#25314f; color:#5a6a93; cursor:not-allowed; box-shadow:none; }
.secondary-btn {
  background:rgba(59,130,246,.12); color:#a9c6ff;
  border:1px solid rgba(59,130,246,.4); width:auto;
  padding:10px 18px; font-size:14px;
}
.secondary-btn:hover { background:rgba(59,130,246,.24); box-shadow:0 0 14px rgba(59,130,246,.3); }

.msg { margin-top:12px; font-size:13px; color:var(--warn); min-height:18px; }
.msg.err { color:var(--danger); }
.msg.ok { color:var(--good); }

/* ---------- 单篇结果 ---------- */
.result { animation:fadeIn .4s ease; }
@keyframes fadeIn { from{opacity:0; transform:translateY(8px);} to{opacity:1;} }

.score-card {
  display:flex; align-items:center; gap:26px;
  background:
    radial-gradient(600px 200px at 20% -40%, rgba(59,130,246,.35), transparent 70%),
    linear-gradient(135deg,#101f44 0%, #0a1430 60%, #0c1a3a 100%);
  border:1px solid rgba(59,130,246,.35);
  border-radius:16px; padding:24px; color:#fff; margin-bottom:20px;
  box-shadow:0 0 30px rgba(29,78,216,.25);
}
.score-ring-wrap { position:relative; width:140px; height:140px; flex-shrink:0; }
.score-center {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; font-weight:800;
}
.score-center span {
  font-size:38px; line-height:1;
  text-shadow:0 0 14px rgba(59,130,246,.8);
}
.score-center small { font-size:13px; color:#8fb4e8; }
.grade-badge {
  display:inline-block;
  background:linear-gradient(135deg,#34d399,#22d3ee);
  color:#04231c;
  padding:5px 16px; border-radius:20px; font-size:15px; font-weight:800;
  box-shadow:0 0 16px rgba(52,211,153,.5); margin-bottom:8px;
}
.doc-title { font-size:17px; font-weight:600; margin-bottom:4px; }
.result .hint { color:#89a0cf; }

/* ---------- 双栏 / 区块 ---------- */
.cols-2 { display:grid; grid-template-columns: 380px 1fr; gap:18px; margin-bottom:18px; }
@media (max-width:1200px){ .cols-2{ grid-template-columns:1fr; } }
.radar-box, .dims-result, .section-block {
  background:rgba(9,18,42,.7);
  border:1px solid var(--border);
  border-radius:13px; padding:16px;
}
.radar-box h3, .dims-result h3, .section-block h3 { font-size:14px; margin-bottom:12px; color:#cfe0ff; display:flex; align-items:center; gap:6px; }
.radar-box h3::before,.dims-result h3::before,.section-block h3::before{
  content:""; width:4px;height:13px;border-radius:2px;background:linear-gradient(180deg,var(--primary),var(--primary2));
}
#radarChart { width:100%; height:330px; }
#scoreRing { display:block; }

.dim-row {
  border:1px solid var(--border); border-radius:9px; padding:10px 12px; margin-bottom:8px;
  background:rgba(7,16,38,.55);
}
.dim-row:hover { border-color:rgba(59,130,246,.5); }
.dim-row .dim-head { display:flex; justify-content:space-between; align-items:center; }
.dim-row .dim-name { font-weight:600; color:#dbe6ff; }
.dim-row .dim-score { font-weight:800; font-size:18px; }
.dim-row .dim-score.high { color:var(--good); text-shadow:0 0 10px rgba(52,211,153,.4); }
.dim-row .dim-score.mid { color:var(--warn); }
.dim-row .dim-score.low { color:var(--danger); }
.bar-wrap { height:8px; background:#16213f; border-radius:6px; margin:8px 0; overflow:hidden; }
.bar-fill {
  height:100%; border-radius:6px;
  background:linear-gradient(90deg,var(--primary),var(--primary2));
  box-shadow:0 0 10px rgba(34,211,238,.6);
  transition:width .8s ease;
}
.dim-row .dim-comment { font-size:13px; color:#b7c6e6; line-height:1.7; margin-top:4px; }

.section-block { margin-bottom:18px; }
.section-block .summary { font-size:14px; line-height:1.9; color:#cfdcf7; }
.cols-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:18px; }
@media (max-width:1100px){ .cols-3{ grid-template-columns:1fr; } }
.section-block.good { border-left:3px solid var(--good); }
.section-block.warn { border-left:3px solid var(--warn); }
.section-block.fix { border-left:3px solid var(--fix); }
.section-block.good h3 { color:var(--good); }
.section-block.warn h3 { color:var(--warn); }
.section-block.fix h3 { color:var(--fix); }
.section-block ul { padding-left:20px; }
.section-block li { font-size:13px; line-height:1.9; color:#b9c9e9; margin-bottom:4px; }
.section-block.integrity { border-left:3px solid var(--warn); }
.section-block.integrity p { font-size:13px; color:#9fb2d8; line-height:1.8; }

/* ---------- 占位 ---------- */
.placeholder { text-align:center; padding:120px 20px; color:var(--muted); }
.placeholder p { font-size:17px; margin-bottom:8px; color:#8fa6d8; }
.placeholder .hint { font-size:13px; }

/* ---------- 批量文件列表 ---------- */
.batch-file-list { max-height:180px; overflow:auto; margin-top:10px; border:1px solid var(--border); border-radius:9px; padding:8px; background:rgba(6,13,30,.5); }
.batch-file-item { display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:6px; font-size:13px; }
.batch-file-item:nth-child(odd) { background:rgba(59,130,246,.06); }
.batch-file-item .bf-name { flex:1; word-break:break-all; }
.batch-file-item .bf-del { color:var(--danger); cursor:pointer; border:none; background:none; font-size:16px; line-height:1; }

/* ---------- 批量进度 ---------- */
.batch-progress {
  background:rgba(9,18,42,.8); border:1px solid var(--border);
  border-radius:14px; padding:20px; margin-bottom:18px;
  box-shadow:0 0 24px rgba(29,78,216,.15);
}
.progress-head { display:flex; justify-content:space-between; font-size:14px; margin-bottom:10px; font-weight:600; }
.progress-head .pct { color:var(--primary2); font-weight:800; text-shadow:0 0 10px rgba(34,211,238,.6); }
.progress-bar { height:14px; background:#131f40; border-radius:8px; overflow:hidden; border:1px solid rgba(59,130,246,.2); }
.progress-fill {
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--primary),var(--primary2),var(--good));
  background-size:200% 100%;
  animation:shimmer 2s linear infinite;
  transition:width .5s ease; border-radius:8px;
}
@keyframes shimmer { to { background-position:-200% 0; } }
#batchCurrentFile { margin-top:10px; color:#a9c6ff; }
.batch-item-status { margin-top:12px; max-height:170px; overflow:auto; }
.bis-row { display:flex; align-items:center; gap:8px; font-size:12px; padding:2px 0; color:#8fa6d8; }
.bis-row .st { font-size:11px; padding:1px 7px; border-radius:9px; color:#fff; flex-shrink:0; }
.st-queued{background:#39476e;} .st-grading{background:linear-gradient(135deg,var(--primary),var(--primary2));}
.st-done{background:#34d399;} .st-error{background:var(--danger);}
.bis-row .fn { flex:1; word-break:break-all; }
.bis-row .sc { font-weight:700; color:#dbe6ff; }

/* ---------- 统计卡片 ---------- */
.stats-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:12px; margin-bottom:18px; }
.stat-card {
  background:linear-gradient(160deg, rgba(19,32,70,.95), rgba(12,22,50,.95));
  border:1px solid rgba(59,130,246,.3);
  color:#fff; border-radius:13px; padding:14px 10px; text-align:center;
  box-shadow:0 6px 18px rgba(3,10,28,.4);
}
.stat-card .sv {
  font-size:26px; font-weight:800;
  background:linear-gradient(90deg,#fff,#7fd6ff);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.stat-card .sl { font-size:12px; color:#8fb4e8; margin-top:4px; }
.stat-card.hl { border-color:rgba(52,211,153,.5); box-shadow:0 0 16px rgba(52,211,153,.2); }
.stat-card.low { border-color:rgba(251,191,36,.5); box-shadow:0 0 16px rgba(251,191,36,.2); }

/* ---------- 条形图 ---------- */
.bar-chart { padding:4px 0; }
.bar-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:13px; }
.bar-row .b-label { width:88px; text-align:right; color:#a9bcdd; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-row .b-bar { flex:1; background:#131f40; border-radius:6px; height:18px; overflow:hidden; }
.bar-row .b-fill {
  height:100%; width:0;
  background:linear-gradient(90deg,var(--primary),var(--primary2));
  border-radius:6px; transition:width .8s ease;
  display:flex; align-items:center; justify-content:flex-end;
}
.bar-row .b-fill span { color:#04102b; font-size:11px; font-weight:800; padding-right:6px; }

/* ---------- 学生明细表 ---------- */
.table-scroll { overflow:auto; max-height:440px; border-radius:10px; border:1px solid var(--border); }
.batch-table { width:100%; border-collapse:collapse; font-size:13px; min-width:640px; }
.batch-table th {
  background:linear-gradient(90deg,#13275a,#1b3a7a);
  color:#dceaff; padding:8px; text-align:left;
  position:sticky; top:0; z-index:1; white-space:nowrap;
  font-weight:600;
}
.batch-table td { padding:7px 8px; border-bottom:1px solid rgba(30,44,79,.7); vertical-align:top; color:#c4d2ef; }
.batch-table tr:hover td { background:rgba(59,130,246,.08); }
.batch-table .rank { color:#6f84b4; }
.batch-table th.col-comment, .batch-table td.col-comment { min-width:320px; }
.batch-table th.dim-col, .batch-table td.dim-col { text-align:center; white-space:nowrap; min-width:52px; }

/* 评语单元格 */
.comment-cell { font-size:12px; line-height:1.75; color:#c4d2ef; max-width:540px; }
.comment-cell .cmt-good { color:var(--good); font-weight:700; margin-top:4px; }
.comment-cell .cmt-warn { color:var(--warn); font-weight:700; margin-top:6px; }
.comment-cell .cmt-fix { color:#8fb2ff; font-weight:700; margin-top:6px; }

/* ---------- 学情关注 ---------- */
.attention-box { margin-top:10px; background:rgba(251,191,36,.07); border:1px solid rgba(251,191,36,.4); border-radius:9px; padding:10px 14px; }
.attention-box .at-title { font-weight:700; color:var(--warn); margin-bottom:4px; }

.btn-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
.btn-row .small { width:auto; padding:10px 18px; font-size:14px; }

/* ---------- 杂项 ---------- */
.hidden { display:none !important; }

.loading-mask {
  position:fixed; inset:0;
  background:rgba(4,9,22,.82);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  z-index:100; color:#fff; backdrop-filter:blur(6px);
}
.loader {
  width:58px; height:58px; border-radius:50%;
  border:5px solid rgba(59,130,246,.2);
  border-top-color:var(--primary2);
  animation:spin 1s linear infinite; margin-bottom:18px;
  box-shadow:0 0 24px rgba(34,211,238,.35);
}
@keyframes spin { to{ transform:rotate(360deg); } }
#loadingText { font-size:15px; letter-spacing:2px; color:#cfe0ff; }

/* 滚动条 */
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-track { background:rgba(7,14,32,.6); }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#24427c,#1b5bbf); border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:var(--primary); }
