* { box-sizing: border-box; }
html, body, #app { height: 100%; margin: 0; }
body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #f0f2f5; color: #303133; }

.login-page {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1d2a3a;
}
.login-card { width: 400px; border: 0; }
.login-logo {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #409eff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 16px;
}
.login-card h2 { margin: 0 0 6px; font-size: 22px; font-weight: 600; }
.login-card p { margin: 0 0 22px; color: #909399; font-size: 13px; }

.layout { height: 100%; }
.layout-aside {
  background: #1f2d3d;
  overflow: visible;
  transition: width .15s ease;
}
.brand {
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-bottom: 1px solid #2b3a4a;
  white-space: nowrap;
  overflow: hidden;
}
.brand i { margin-right: 8px; color: #409eff; font-size: 18px; }
.brand.is-mini { justify-content: center; padding: 0; }
.brand.is-mini i { margin-right: 0; }
.layout-aside .el-menu { border-right: 0; }
.layout-header {
  background: #fff;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 8px;
  height: 56px;
}
.header-left { display: flex; align-items: center; gap: 8px; }
.header-title { font-size: 16px; font-weight: 600; line-height: 1.2; }
.header-crumb { font-size: 12px; color: #909399; margin-top: 2px; }
.header-right { display: flex; align-items: center; gap: 4px; }
.header-icon { font-size: 16px; color: #606266; padding: 0 6px; }
.user-box { display: flex; align-items: center; cursor: pointer; color: #606266; }
.user-box .el-avatar { margin-right: 8px; background: #409eff; }
.user-meta { line-height: 1.2; }
.user-meta b { display: block; font-size: 13px; color: #303133; }
.user-meta span { font-size: 12px; color: #909399; }
.layout-main { padding: 16px 20px 24px; min-height: calc(100vh - 56px); }
.page-card { min-height: calc(100vh - 104px); }
.toolbar { margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.toolbar-left { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.hint { color: #909399; font-size: 13px; }
.pager { margin-top: 16px; text-align: right; }

.stat-row { margin-bottom: 16px; }
.welcome-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.welcome-title { font-size: 18px; font-weight: 600; }
.welcome-sub { color: #909399; font-size: 13px; margin-top: 4px; }
.stat-card { position: relative; overflow: hidden; }
.stat-card.is-link { cursor: pointer; }
.stat-card.is-link:hover { transform: translateY(-1px); }
.login-extra { margin: -8px 0 14px; }
.stat-chips { display: inline-flex; gap: 8px; color: #909399; font-size: 13px; }
.stat-chips em { font-style: normal; cursor: pointer; }
.stat-chips em:hover { color: #409eff; }
.stat-chips em.warn:hover { color: #e6a23c; }
.batch-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: #f4f8ff;
  border-radius: 4px;
  color: #409eff;
  font-size: 13px;
}
.plate-cell { cursor: pointer; }
.plate-cell:hover { color: #409eff; }
.el-table.is-clickable .el-table__row { cursor: pointer; }
.stat-card .el-card__body { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; }
.stat-num { font-size: 26px; font-weight: 600; color: #303133; line-height: 1.2; }
.stat-label { color: #909399; font-size: 13px; margin-top: 6px; }
.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
}
.stat-icon.blue { background: #409eff; }
.stat-icon.green { background: #67c23a; }
.stat-icon.gray { background: #909399; }
.stat-icon.orange { background: #e6a23c; }

.quick-grid { display: flex; gap: 12px; flex-wrap: wrap; }
.quick-btn { min-width: 120px; }

.table-actions .el-button { margin-left: 0; margin-right: 6px; }
.plate-cell { font-weight: 600; letter-spacing: .3px; }
.perm-tree-box { max-height: 360px; overflow: auto; border: 1px solid #ebeef5; padding: 8px 10px; border-radius: 4px; }

.el-table th { background: #fafafa !important; }

@media (max-width: 768px) {
  .layout-main { padding: 12px; }
  .login-card { width: 92%; }
}