html, body { height: 100%; background: #f2f3f5; }
.login-wrap { min-height: 100%; display: flex; background: #f2f3f5; }
.login-brand {
  flex: 1.1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  color: #fff;
  background: linear-gradient(155deg, #0f6b4c 0%, #16b777 58%, #7ed9b8 100%);
}
.login-brand h1 { margin: 0 0 12px; font-size: 36px; font-weight: 600; letter-spacing: 1px; }
.login-brand p { margin: 0; font-size: 16px; opacity: .9; }
.login-panel {
  width: min(460px, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 28px;
  background: #fff;
}
.login-panel .box { width: 100%; max-width: 360px; }
.login-panel h2 { margin: 0 0 6px; font-size: 22px; }
.login-panel .sub { margin: 0 0 22px; color: #667085; }
.login-error { min-height: 22px; color: #ff5722; }
.layui-layout-admin .layui-side { top: 0; bottom: 0; background: #2f363c; }
.layui-layout-admin .layui-side .layui-side-scroll { height: 100%; padding-top: 60px; box-sizing: border-box; }
.layui-layout-admin .layui-logo {
  background: #2f363c;
  color: #fff;
  font-weight: 700;
  box-shadow: none;
  z-index: 1002;
}
.layui-layout-admin .layui-header { background: #fff; box-shadow: none; }
.layui-layout-admin .layui-header:after {
  content: "";
  position: absolute;
  left: 200px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #e6e6e6;
}
.layui-layout-admin .layui-header .layui-nav .layui-nav-item a,
.layui-layout-admin .layui-header .layui-nav .layui-nav-item a:hover { color: #333; }
.layui-layout-admin .layui-header .layui-nav .layui-this:after,
.layui-layout-admin .layui-header .layui-nav-bar { background-color: #16b777; }
.layui-layout-admin .layui-body { background: #f2f3f5; }
.page { padding: 16px; }
.page > .layui-card { box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.filters .layui-form-label { width: 72px; padding-left: 0; }
.filters .layui-input-inline { width: 168px; }
.filters .layui-btn { margin-bottom: 0; }
.home-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.home-link {
  display: block;
  padding: 22px 18px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  color: #333;
  text-decoration: none;
}
.home-link i { font-size: 28px; color: #16b777; }
.home-link strong { display: block; margin-top: 10px; font-size: 16px; }
.home-link span { color: #667085; }
.welcome { margin-bottom: 16px; }
.welcome h2 { margin: 0 0 6px; }
.welcome p { margin: 0; color: #667085; }
.layui-table-view { margin: 0; }
@media (max-width: 900px) {
  .login-wrap { display: block; }
  .login-brand { min-height: 180px; padding: 32px 24px; }
  .login-brand h1 { font-size: 28px; }
  .home-grid { grid-template-columns: 1fr 1fr; }
}