/* Logicheck 全局设计系统
 * 统一配色：slate 灰阶 + 蓝/绿/红/琥珀语义色
 * 无外部依赖（离线部署可用），字体使用系统栈
 */

/* ========== 1. 设计令牌 ========== */
:root {
  /* 灰阶（slate） */
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* 语义色 */
  --primary:        #2563eb;
  --primary-hover:  #1d4ed8;
  --primary-soft:   #eff6ff;
  --success:        #15803d;
  --success-soft:   #f0fdf4;
  --danger:         #dc2626;
  --danger-hover:   #b91c1c;
  --danger-soft:    #fef2f2;
  --warning:        #b45309;
  --warning-soft:   #fffbeb;
  --info:           #2563eb;
  --info-soft:      #eff6ff;

  /* 文本 */
  --text:        var(--gray-800);
  --text-muted:  var(--gray-500);
  --border:      var(--gray-200);
  --bg-page:     var(--gray-50);
  --bg-card:     #ffffff;

  /* 尺寸 */
  --radius: 8px;
  --radius-sm: 5px;
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow:    0 1px 3px rgba(15, 23, 42, .1), 0 1px 2px rgba(15, 23, 42, .06);

  /* 字体 */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ========== 2. 基础重置 ========== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 1.5rem; margin: 0 0 var(--space-2); }
h2 { font-size: 1.2rem; margin: var(--space-3) 0 var(--space-1); }
h3 { font-size: 1.05rem; margin: var(--space-2) 0 var(--space-1); }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }

p { margin: var(--space-1) 0; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-3) 0; }

/* ========== 3. 布局容器 ========== */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-2);
}

/* 登录 / 改密等窄页面 */
.container-narrow { max-width: 480px; }

/* ========== 4. 顶部导航 ========== */
.topnav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .25rem .5rem;
  background: var(--gray-900);
  padding: .55rem var(--space-2);
}
.topnav .brand {
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  margin-right: var(--space-2);
  text-decoration: none;
}
.topnav a {
  color: var(--gray-300);
  padding: .35rem .6rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
}
.topnav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.topnav a.active { color: #fff; background: rgba(255, 255, 255, .14); }
/* 右侧分组（如退出表单） */
.topnav .topnav-right { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.topnav form { display: inline; margin: 0; }
.topnav form button {
  background: transparent;
  border: 1px solid var(--gray-600);
  color: var(--gray-300);
  padding: .3rem .8rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: .9rem;
  font-family: inherit;
}
.topnav form button:hover { color: #fff; border-color: var(--gray-400); }

/* ========== 5. Flash 提示条 ========== */
.flash {
  padding: .7rem var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--gray-100);
  color: var(--gray-700);
  margin: var(--space-1) 0;
}
.flash-error   { background: var(--danger-soft);  border-color: #fecaca; color: var(--danger); }
.flash-warning { background: var(--warning-soft); border-color: #fde68a; color: var(--warning); }
.flash-success { background: var(--success-soft); border-color: #bbf7d0; color: var(--success); }

/* ========== 6. 卡片 ========== */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-2) 0;
}
.card h2 { margin-top: 0; }
.card h3 { margin: 0 0 var(--space-1); }

/* ========== 7. 表单 ========== */
.form-group { margin-bottom: var(--space-2); }

label {
  display: block;
  font-weight: 600;
  margin-bottom: .3rem;
  color: var(--gray-700);
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="file"],
select,
textarea {
  width: 100%;
  padding: .5rem .7rem;
  font: inherit;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
input[type="file"] { padding: .4rem; }
textarea { min-height: 6rem; resize: vertical; }

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}

input:disabled, select:disabled, textarea:disabled {
  background: var(--gray-100);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* 控件下方的小号说明文字 */
.form-help { font-size: .85rem; color: var(--text-muted); margin-top: .25rem; }

/* 多选框列表 */
.checkbox-group label,
.checkbox-grid label { font-weight: 400; display: flex; align-items: center; gap: .4rem; }
.checkbox-group input[type="checkbox"],
.checkbox-grid input[type="checkbox"] { width: auto; }
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .3rem .8rem;
}

/* ========== 8. 按钮 ========== */
.btn {
  display: inline-block;
  padding: .5rem 1.1rem;
  font: inherit;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); color: #fff; }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-hover); color: #fff; }

.btn-secondary {
  background: #fff;
  color: var(--gray-700);
  border-color: var(--gray-300);
}
.btn-secondary:hover { background: var(--gray-100); color: var(--gray-800); }

.btn-sm { padding: .25rem .7rem; font-size: .85rem; }

/* ========== 9. 表格 ========== */
.table-wrap { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: .92rem;
}
.table th, .table td {
  border: 1px solid var(--border);
  padding: .5rem .8rem;
  text-align: left;
  vertical-align: top;
}
.table th { background: var(--gray-50); font-weight: 600; color: var(--gray-700); }
.table tbody tr:nth-child(even) { background: var(--gray-50); }
.table tbody tr:hover { background: var(--primary-soft); }

/* 键值信息表（th 为行首标签列，用于提交信息展示） */
.table-info th { width: 140px; white-space: nowrap; }

/* ========== 10. 分页 ========== */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  align-items: center;
  margin: var(--space-2) 0;
}
.pagination a, .pagination .current, .pagination .gap {
  padding: .3rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--gray-700);
  text-decoration: none;
  font-size: .9rem;
}
.pagination a:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.pagination .current {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}

/* ========== 11. 评分展示 ========== */
/* 圆形得分环（result.html） */
.score-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  margin: var(--space-2) auto;
}
.score-pass { background: var(--success-soft); color: var(--success); border: 4px solid var(--success); }
.score-fail { background: var(--danger-soft);  color: var(--danger);  border: 4px solid var(--danger); }

/* 判题结论横幅 */
.verdict-banner {
  padding: var(--space-2);
  border-radius: var(--radius);
  text-align: center;
  margin: var(--space-2) 0;
  font-size: 1.15rem;
  font-weight: bold;
  border: 2px solid var(--border);
}
.verdict-accepted { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.verdict-wrong_answer { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.verdict-compile_error,
.verdict-runtime_error,
.verdict-time_limit_exceeded {
  background: var(--warning-soft);
  color: var(--warning);
  border-color: #f59e0b;
}
.verdict-pending_release { background: var(--info-soft); color: var(--info); border-color: var(--info); }

/* OJ 测试用例列表（result.html） */
.test-list { list-style: none; padding: 0; margin: var(--space-2) 0; }
.test-item {
  display: flex;
  align-items: center;
  padding: .6rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin: .3rem 0;
  background: #fff;
}
.test-item .icon { font-size: 1.2rem; margin-right: .8rem; }
.test-item .name { flex: 1; font-weight: 500; }
.test-item .score { font-weight: bold; }
.test-ac  { background: var(--success-soft); }
.test-wa  { background: var(--danger-soft); }
.test-ce, .test-re, .test-tle { background: var(--warning-soft); }
.test-detail {
  font-size: .85rem;
  color: var(--text-muted);
  margin: .2rem 0 .4rem;
  padding-left: 2.5rem;
}
.test-detail pre {
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .6rem .8rem;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-x: auto;
  font-size: .85rem;
}
.test-item .duration { margin-left: .8rem; color: var(--gray-400); font-size: .85rem; }

/* ========== 12. 逐行差异对比 ========== */
.diff-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: .88rem;
  background: #fff;
}
.diff-table th {
  background: var(--gray-50);
  padding: .4rem .6rem;
  text-align: left;
  border: 1px solid var(--border);
}
.diff-table td {
  padding: .3rem .6rem;
  border: 1px solid var(--border);
  vertical-align: top;
  white-space: pre-wrap;
  word-break: break-all;
}
.diff-match td { background: var(--success-soft); color: var(--text-muted); }
.diff-mismatch td.s-line { background: var(--danger-soft); }
.diff-mismatch td.r-line { background: var(--success-soft); }
.diff-table .line-num { width: 50px; text-align: right; color: var(--gray-400); }

/* ========== 13. 统计卡片与条形图 ========== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-2);
  margin: var(--space-2) 0;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-2);
  text-align: center;
}
.stat-card .stat-num { font-size: 1.8rem; font-weight: 700; color: var(--gray-800); }
.stat-card .stat-label { font-size: .85rem; color: var(--text-muted); }

/* 横向条形图 */
.bar-row { display: flex; align-items: center; gap: .6rem; margin: .35rem 0; }
.bar-label { flex: 0 0 9rem; font-size: .88rem; color: var(--gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { flex: 1; background: var(--gray-100); border-radius: var(--radius-sm); height: 1.1rem; overflow: hidden; }
.bar-fill { height: 100%; background: var(--primary); border-radius: var(--radius-sm); }

/* ========== 14. 加载动画 ========== */
.spinner {
  display: inline-block;
  width: 1.4rem;
  height: 1.4rem;
  border: 3px solid var(--gray-200);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ========== 15. 徽章 ========== */
.badge {
  display: inline-block;
  padding: .12rem .55rem;
  font-size: .8rem;
  font-weight: 600;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--gray-600);
  border: 1px solid var(--border);
}
.badge-success { background: var(--success-soft); color: var(--success); border-color: #bbf7d0; }
.badge-danger  { background: var(--danger-soft);  color: var(--danger);  border-color: #fecaca; }
.badge-warning { background: var(--warning-soft); color: var(--warning); border-color: #fde68a; }
.badge-muted   { background: var(--gray-100);    color: var(--text-muted); }

/* ========== 16. 学生端题目卡片 ========== */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-2);
}
.problem-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.problem-card h3 { margin: 0; }
.problem-card .meta { color: var(--text-muted); font-size: .88rem; }
.problem-card .actions { margin-top: auto; }

/* ========== 17. 代码块 ========== */
pre, code { font-family: var(--font-mono); }
code {
  background: var(--gray-100);
  padding: .1rem .35rem;
  border-radius: 4px;
  font-size: .88em;
}
pre code { background: none; padding: 0; }
.code-block, pre.code-block {
  background: var(--gray-900);
  color: var(--gray-100);
  padding: var(--space-2);
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: .88rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ========== 18. 折叠区块 ========== */
details { margin: .3rem 0; }
details summary { cursor: pointer; color: var(--primary); font-weight: 500; }
details summary:hover { color: var(--primary-hover); }
details[open] summary { margin-bottom: .4rem; }

/* ========== 19. 工具类 ========== */
.text-muted   { color: var(--text-muted); }
.text-danger  { color: var(--danger); }
.text-success { color: var(--success); }
.text-center  { text-align: center; }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }

.flex-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.hidden { display: none !important; }

/* ========== 20. 表格化 UI 三件套：grid / record-table / kv-table ==========
 * 全站只有这三种内容容器，均与 .table 基础样式组合使用：
 *   数据网格 .grid         —— 列表页，一行一记录，末列「操作」，表头下为「新增行」
 *   记录表  .record-table  —— 新建/编辑/详情页，两列（字段 | 值或控件）
 *   键值表  .kv-table      —— 统计/概览，两列（指标 | 数值）
 */

/* —— 数据网格 .grid —— */
/* 新增行：虚线边框，直观区分于数据行 */
.grid tr.grid-new-row td { border: 1px dashed var(--gray-300); background: #fff; }
/* 行内编辑态高亮 */
.grid tr.grid-editing td { background: var(--primary-soft); }
/* 操作列：按钮横向排列，空间不足时自动换行 */
.grid td.grid-actions {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.grid td.grid-actions form { display: inline-flex; margin: 0; }
/* 行内编辑控件（grid.js 注入 / 新增行常驻） */
.cell-input, .cell-select {
  width: 100%;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  padding: .25rem .5rem;
  font: inherit;
  background: #fff;
}
.cell-input:focus-visible, .cell-select:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}
/* 网格工具条：筛选/工具链接行，置于表格上方 */
.grid-toolbar {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .5rem .8rem;
  margin: var(--space-1) 0;
}

/* —— 记录表 .record-table：两列（字段 | 值或控件）—— */
.record-table th {
  width: 200px;
  background: var(--gray-50);
  color: var(--text-muted);
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
}
/* 标签列内嵌 label 时去掉表单默认间距/字重 */
.record-table th label { margin: 0; font-weight: inherit; color: inherit; }
.record-table td { vertical-align: middle; }
/* 末行操作行：按钮左对齐 */
.record-table tr.record-actions td { text-align: left; background: var(--gray-50); }

/* —— 键值表 .kv-table：两列（指标 | 数值）—— */
.kv-table th {
  width: 200px;
  background: var(--gray-50);
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}
/* 大号数值 */
.kv-num { font-size: 1.35rem; font-weight: 700; color: var(--gray-800); }

/* ========== 21. 在线代码编辑器 ========== */
.editor-tabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-3);
  border-bottom: 2px solid var(--gray-200);
}
.editor-tab {
  padding: .5rem 1.25rem;
  border: none;
  background: none;
  font-size: .9rem;
  font-weight: 500;
  color: var(--gray-500);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.editor-tab:hover { color: var(--gray-700); }
.editor-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.editor-panel { display: none; }
.editor-panel.active { display: block; }
#monaco-editor { border: 1px solid var(--border); border-radius: var(--radius-sm); }
.editor-hint { font-size: .8rem; color: var(--text-muted); margin-top: .35rem; }

/* ========== 22. 响应式（≤640px 移动端） ========== */
@media (max-width: 640px) {
  /* 全局 */
  .container { padding: var(--space-2) var(--space-1); }
  body { font-size: .9rem; }

  /* 导航：允许换行，缩小间距与字号 */
  .topnav {
    gap: .1rem;
    flex-wrap: wrap;
    padding: .4rem .6rem;
  }
  .topnav a {
    padding: .3rem .5rem;
    font-size: .8rem;
  }
  .topnav .brand { font-size: .9rem; }
  .topnav .topnav-right {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }

  /* 页面标题 */
  h1 { font-size: 1.25rem; }

  /* 统计卡片：单列 */
  .stat-grid { grid-template-columns: 1fr; }
  .stat-card .stat-num { font-size: 1.4rem; }

  /* 学生题目卡片：单列 */
  .problem-grid { grid-template-columns: 1fr; }

  /* 条形图标签 */
  .bar-row { gap: .4rem; }
  .bar-label { flex-basis: 5rem; font-size: .8rem; }

  /* —— 表格 —— */
  .table { font-size: .82rem; }
  .table th, .table td { padding: .35rem .45rem; }

  /* 数据网格：水平滚动（.table-wrap 已处理），缩小操作列间距 */
  .grid td.grid-actions {
    gap: .2rem;
    flex-wrap: wrap;
  }
  .grid .btn-sm { padding: .2rem .5rem; font-size: .78rem; }
  .grid-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
  }

  /* 记录表 & 键值表：两列堆叠为标签在上、值在下 */
  .record-table,
  .record-table tbody,
  .record-table tr,
  .record-table th,
  .record-table td,
  .kv-table,
  .kv-table tbody,
  .kv-table tr,
  .kv-table th,
  .kv-table td {
    display: block;
    width: auto !important;
  }
  .record-table th,
  .kv-table th {
    text-align: left;
    white-space: normal;
    font-size: .78rem;
    padding: .25rem .45rem .1rem;
    border-bottom: none;
    background: none;
  }
  .record-table td,
  .kv-table td {
    padding: .15rem .45rem .4rem;
    border-top: none;
  }
  .record-table tr,
  .kv-table tr {
    border-bottom: 1px solid var(--border);
    margin-bottom: .3rem;
  }
  .record-table tr:last-child,
  .kv-table tr:last-child {
    border-bottom: none;
  }
  /* 操作行不堆叠，保留横向布局 */
  .record-table tr.record-actions,
  .record-table tr.record-actions th,
  .record-table tr.record-actions td {
    display: revert;
    width: auto !important;
  }

  /* 键值表大号数值 */
  .kv-num { font-size: 1.15rem; }

  /* 表单 */
  .btn { padding: .4rem .8rem; font-size: .88rem; }
  .checkbox-grid { grid-template-columns: 1fr; }

  /* 判题横幅 */
  .verdict-banner { font-size: 1rem; padding: var(--space-1); }

  /* 得分环 */
  .score-ring { width: 90px; height: 90px; font-size: 1.5rem; }

  /* 测试用例列表 */
  .test-item { flex-wrap: wrap; gap: .3rem; }
  .test-item .duration { margin-left: 0; width: 100%; }

  /* 差异表：通过 .table-wrap 水平滚动，缩小区号宽度 */
  .diff-table { font-size: .78rem; }
  .diff-table .line-num { width: 32px; }

  /* 在线编辑器 */
  .editor-tab { padding: .4rem .6rem; font-size: .8rem; }
  #monaco-editor { height: 300px !important; }
  .editor-hint { font-size: .75rem; }
}