* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  background: #f5f6f8;
  color: #303133;
}

.loading-tip { padding: 40px; text-align: center; color: #909399; font-size: 14px; }

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-box {
  width: 360px;
  background: #fff;
  border-radius: 8px;
  padding: 32px 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.login-box h2 { margin: 0 0 24px; font-size: 18px; font-weight: 500; text-align: center; }

.topbar {
  height: 56px;
  background: #fff;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.topbar .title { font-size: 16px; font-weight: 500; }
.topbar .left { display: flex; align-items: center; gap: 12px; }
.topbar .right { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #606266; }

/* 导航收起/展开按钮 */
.nav-toggle {
  width: 30px; height: 30px;
  border: 1px solid #dcdfe6;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: #606266;
}
.nav-toggle:hover { border-color: #409eff; color: #409eff; }

.layout { display: flex; height: calc(100vh - 56px); }
.side { width: 170px; background: #fff; border-right: 1px solid #ebeef5; overflow-y: auto; overflow-x: hidden; transition: width .2s ease; }
.side.side-collapsed { width: 64px; }
.main { flex: 1; padding: 16px; overflow: auto; min-width: 0; }

/* 菜单里的文字图标（收起时只留图标） */
.menu-ico { font-style: normal; display: inline-block; width: 20px; text-align: center; margin-right: 6px; }
.el-menu--collapse .menu-ico { margin-right: 0; width: auto; }
.el-menu--collapse .el-menu-item span,
.el-menu--collapse .el-sub-menu__title span { display: none; }

/* 查询结果分页条 */
.page-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-top: 1px solid #ebeef5;
}

.panel {
  background: #fff;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 12px;
}

.row-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.muted { color: #909399; font-size: 12px; }
.danger-text { color: #f56c6c; }
.ok-text { color: #67c23a; }
.spacer { flex: 1; }

.query-layout { display: flex; gap: 12px; }
.tpl-side { width: 240px; background: #fff; border-radius: 6px; padding: 8px; align-self: flex-start; max-height: calc(100vh - 120px); overflow: auto; flex-shrink: 0; }
.tpl-side-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 8px; border-bottom: 1px solid #ebeef5; margin-bottom: 4px; }
.tpl-group-title { padding: 8px 10px; font-size: 13px; font-weight: 500; color: #909399; }
.grp-name { font-size: 13px; font-weight: 500; color: #303133; }
.grp-count {
  display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 5px;
  background: #f0f2f5; color: #909399; border-radius: 9px;
  font-size: 12px; line-height: 18px; text-align: center;
}
.tpl-side .el-collapse-item__header { padding-left: 8px; padding-right: 8px; }
.tpl-side .el-collapse-item__content { padding-bottom: 4px; }
.tpl-item {
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  margin-bottom: 2px;
}
.tpl-item:hover { background: #f5f7fa; }
.tpl-item.active { background: #ecf5ff; color: #409eff; }
.query-body { flex: 1; min-width: 0; }

.sql-box {
  background: #f8f9fb;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 10px;
  font-family: Consolas, Menlo, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  max-height: 400px;
  overflow: auto;
}