:root {
  --主色: #2c7be5;
  --主色深: #1a68d1;
  --危险: #e63757;
  --背景: #f5f7fa;
  --卡片: #ffffff;
  --边框: #e3e8ef;
  --文字: #1f2d3d;
  --次文字: #6b7a8d;
  --绿: #00a86b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--背景);
  color: var(--文字);
  font-size: 14px;
}

.顶栏 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: var(--卡片);
  border-bottom: 1px solid var(--边框);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-wrap: wrap;
}
.品牌 { font-size: 18px; font-weight: 700; color: var(--主色); }
.连接信息 { font-size: 13px; color: var(--次文字); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.连接信息 b { color: var(--文字); }

.内容 { padding: 20px; max-width: 1200px; margin: 0 auto; }

.页脚 { text-align: center; color: var(--次文字); font-size: 12px; padding: 24px; }

.卡片 {
  background: var(--卡片);
  border: 1px solid var(--边框);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 18px;
}

.提示 {
  background: #e8f6ee;
  border: 1px solid #b6e3c8;
  color: #1d7a4d;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
}
.错误 {
  background: #fdeaee;
  border: 1px solid #f5b9c5;
  color: var(--危险);
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
}

.按钮 {
  display: inline-block;
  padding: 8px 16px;
  background: var(--主色);
  color: #fff;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.2;
}
.按钮:hover { background: var(--主色深); }
.按钮.小 { padding: 5px 10px; font-size: 12px; }
.按钮.危险 { background: var(--危险); }
.按钮.危险:hover { background: #c82848; }
.按钮.次 { background: #eef1f6; color: var(--文字); }
.按钮.次:hover { background: #e2e7ef; }

.表清单 { display: flex; flex-wrap: wrap; gap: 10px; }
.表卡片 {
  display: block;
  padding: 14px 18px;
  background: var(--卡片);
  border: 2px solid var(--边框);
  border-radius: 10px;
  text-decoration: none;
  color: var(--文字);
  min-width: 160px;
  transition: border-color .15s, box-shadow .15s;
}
.表卡片:hover { border-color: var(--主色); box-shadow: 0 2px 10px rgba(44,123,229,.12); }
.表卡片 .名 { font-weight: 600; font-size: 15px; }
.表卡片 .副 { color: var(--次文字); font-size: 12px; margin-top: 4px; }

表格 { width: 100%; border-collapse: collapse; font-size: 13px; }
表格 th, 表格 td { border: none; padding: 9px 12px; text-align: left; vertical-align: top; }
表格 th { background: #f0f3f8; font-weight: 600; white-space: nowrap; border-bottom: 2px solid #c0c8d2; }
表格 tr:nth-child(even) td { background: #fafbfc; }
.单元值 { max-width: 320px; overflow: auto; word-break: break-all; }

/* 列表（数据行）分割线：去掉竖线，仅留每条记录之间的横线，最后一条不画 */
表格 tbody td { border-bottom: 1px solid #d0d7de; }
表格 tbody tr:last-child td { border-bottom: none; }

.分页 { display: flex; gap: 6px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.分页 a, .分页 span { padding: 6px 11px; border: 1px solid var(--边框); border-radius: 6px; text-decoration: none; color: var(--文字); background: #fff; }
.分页 .当前 { background: var(--主色); color: #fff; border-color: var(--主色); }
.分页 .省略 { border: none; background: none; }

表单 .行 { margin-bottom: 14px; }
表单 label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 13px; }
表单 .字段元 { font-size: 11px; color: var(--次文字); font-weight: 400; margin-left: 6px; }
输入框, textarea, select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--边框);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--文字);
}
textarea { min-height: 90px; resize: vertical; }
输入框:focus, textarea:focus, select:focus { outline: none; border-color: var(--主色); }

.表单网格 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }

.工具栏 { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.工具栏 h2 { margin: 0; font-size: 18px; }
.英文名 { color: var(--次文字); font-weight: 400; font-size: 0.85em; }

.标签 { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; }
.标签.主键 { background: #fff3e0; color: #c8741a; }
.标签.自增 { background: #eef6ff; color: var(--主色); }
.标签.可空 { background: #f0f3f8; color: var(--次文字); }

登录页 { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
登录框 { background: #fff; padding: 32px; border-radius: 12px; border: 1px solid var(--边框); width: 320px; text-align: center; }
登录框 h1 { font-size: 20px; color: var(--主色); margin: 0 0 4px; }
登录框 .副标题 { color: var(--次文字); margin: 0 0 18px; }
登录框 输入框 { margin-bottom: 12px; }

.代码框 { font-family: "SFMono-Regular", Consolas, monospace; font-size: 13px; white-space: pre-wrap; word-break: break-all; }