.bae-top{
  display:grid;
  grid-template-columns:38px 1fr 38px;
  align-items:center;
  gap:10px;
  margin:4px 0 13px
}

.bae-top small{
  color:#b8954e;
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em
}

.bae-top h2{
  margin:3px 0 0;
  font-size:20px
}

.bae-back,
.bae-refresh{
  width:38px;
  height:38px;
  border:1px solid rgba(212,168,76,.18);
  border-radius:12px;
  background:#111416;
  color:#d5b361
}

.bae-back{
  font-size:25px
}

.bae-refresh{
  font-size:18px
}

.bae-card,
.bae-state{
  margin-bottom:10px;
  padding:14px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:17px;
  background:linear-gradient(
    145deg,
    #131617,
    #090b0c
  )
}

.bae-card>small,
.bae-state>small{
  display:block;
  margin-bottom:10px;
  color:#b8954e;
  font-size:8px;
  font-weight:900;
  letter-spacing:.1em
}

.bae-state>div{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:9px 0;
  border-top:1px solid rgba(255,255,255,.055)
}

.bae-state span{
  color:#a5aaad;
  font-size:12px
}

.bae-state b{
  font-size:12px
}

.bae-state .ok{
  color:#d5b361
}

.bae-state .off{
  color:#777
}

.bae-card label{
  display:block;
  margin-bottom:12px;
  color:#9da2a5;
  font-size:11px
}

.bae-card input,
.bae-card textarea,
.bae-card select{
  box-sizing:border-box;
  width:100%;
  margin-top:6px;
  padding:12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  outline:none;
  background:#090b0c;
  color:#f1f1f1;
  font-size:13px
}

.bae-card textarea{
  min-height:94px;
  resize:vertical
}

.bae-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px
}

.bae-primary,
.bae-danger{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  font-weight:800
}

.bae-primary{
  border:1px solid rgba(212,168,76,.35);
  background:linear-gradient(
    135deg,
    #d1aa55,
    #8e6829
  );
  color:#090a0a
}

.bae-danger{
  margin-top:11px;
  border:1px solid rgba(220,90,90,.25);
  background:rgba(150,45,45,.11);
  color:#df8d8d
}

.bae-primary:disabled,
.bae-danger:disabled{
  opacity:.45
}

.bae-hint,
.bae-meta{
  margin-top:10px;
  color:#73787b;
  font-size:10px;
  line-height:1.5
}

.bae-section-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:17px 2px 9px
}

.bae-section-title b{
  font-size:13px
}

.bae-section-title span{
  color:#b8954e;
  font-size:11px
}

.bae-empty,
.bae-loading,
.bae-error{
  padding:22px 14px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:17px;
  background:#0b0e0f;
  color:#8c9194;
  text-align:center;
  font-size:12px
}

.bae-error{
  display:grid;
  gap:10px
}

.bae-error b{
  color:#eee
}

.bae-error-back{
  padding:11px;
  border:1px solid rgba(212,168,76,.2);
  border-radius:12px;
  background:#111416;
  color:#d5b361
}

.bae-job-head,
.bae-log-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px
}

.bae-job-head small,
.bae-log-head small{
  display:block;
  color:#787d80;
  font-size:9px
}

.bae-job-head b,
.bae-log-head b{
  display:block;
  margin-top:4px;
  font-size:14px
}

.bae-job p,
.bae-log p{
  margin:11px 0;
  color:#aeb2b4;
  font-size:12px;
  line-height:1.55;
  overflow-wrap:anywhere
}

.bae-chip{
  padding:5px 8px;
  border-radius:999px;
  background:#151819;
  color:#aaa;
  font-size:8px;
  text-transform:uppercase
}

.bae-chip.completed{
  color:#d5b361
}

.bae-chip.running{
  color:#d5b361
}

.bae-chip.failed{
  color:#d77d7d
}

.bae-job-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px
}

.bae-job-stats>div{
  padding:9px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:11px;
  background:#090b0c
}

.bae-job-stats span{
  display:block;
  color:#74797c;
  font-size:9px
}

.bae-job-stats b{
  display:block;
  margin-top:3px;
  color:#d6b768;
  font-size:13px
}

.bae-warning{
  margin-top:10px;
  padding:10px;
  border:1px solid rgba(212,168,76,.14);
  border-radius:11px;
  background:rgba(212,168,76,.045);
  color:#a99059;
  font-size:10px;
  line-height:1.5;
  overflow-wrap:anywhere
}

.bae-log-user{
  margin-top:10px;
  padding:9px;
  border-radius:10px;
  background:#090b0c;
  color:#9ca1a4;
  font-size:11px
}

.bae-log-head strong{
  color:#d5b361;
  font-size:12px
}

.bae-check{
  display:flex!important;
  align-items:center;
  gap:9px;
  padding:10px 0
}

.bae-check input{
  width:18px!important;
  height:18px;
  margin:0!important
}

.bae-check span{
  color:#babec0;
  font-size:11px
}

@media(max-width:380px){
  .bae-grid{
    grid-template-columns:1fr
  }
}