.admin{
  padding:120px 1rem 4rem;
  min-height:100vh;
  width: 100%;
  background:rgba(0,0,0,.6);
  display:flex;
  flex-direction:column;
  align-items:center;
}

.head{
  max-width:1200px;
  width:100%;
  margin:0 auto 24px;
}

.head h1{font-size:2.6rem;margin-bottom:6px}
.sub{color:#ccc;font-weight:700}

.grid{
  max-width:1200px;
  width:100%;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}

.card{
   border-radius: 18px;
    padding: 1.25rem 1.4rem 1.1rem;
    color: #fff;
    text-align: center;
    background: linear-gradient(rgba(25, 15, 39, 0.959), rgb(25, 15, 39)), url(../imgs/blendycity.png);
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .03);
    transition: transform .25s ease, box-shadow .25s ease;
}
.card h2{font-size:1.25rem;margin-bottom:12px}

.field{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
label{color:#ddd;font-weight:900}
input{
  height:52px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.35);
  color:#fff;padding:0 12px;
  font-weight:900;
  outline:none;
}

.btn{
  width:100%;
  height:56px;
  border-radius:16px;
  border:0;
background: #3d245f;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.26));  color:#fff;
  font-weight:900;
  cursor:pointer;
  transition:.2s transform,.2s opacity;
}
.btn:hover{transform:translateY(-2px);opacity:.95}

.two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.err{margin-top:10px;color:#ffb4b4;font-weight:900;min-height:20px}
.ok{margin-top:10px;color:#b7ffcf;font-weight:900;min-height:20px}

.barberList{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.brow{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  padding:12px;
  border-radius:16px;
    border: none;
    background: #29183f;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.26));    
}
.bleft{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.bname{text-align:left;font-weight:900}
.bsub{color:#ccc;font-weight:700;font-size:.95rem}
.actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.small{
  height:40px;
  border-radius:14px;
  border:none;
background: rgba(29, 29, 29, 0.35);
  color:#fff;
  padding:0 12px;
  font-weight:900;
  cursor:pointer;
}
.small:hover{border-color:rgba(209,30,23,.45)}

.revBox{
  margin-top:14px;
  border:none;
  background:rgba(0,0,0,.25);
  border-radius:16px;
  padding:12px;
}
.revLine{
  display:flex;
  justify-content:space-between;
  font-weight:900;
  margin-bottom:10px;
}
.revBy{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.revItem{
  display:flex;
  justify-content:space-between;
  color:#ddd;
  font-weight:800;
}
@media (max-width: 900px){
  .grid{grid-template-columns:1fr}
}
@media (max-width: 600px){
  .admin{
    padding:80px .75rem 3rem;
  }

  .head h1{
    font-size:1.9rem;
    line-height:1.15;
  }

  .sub{
    font-size:.9rem;
  }

  .grid{
    gap:14px;
  }

  .card{
    padding:1rem;
    border-radius:14px;
  }

  .card h2{
    font-size:1.1rem;
  }

  label{
    font-size:.9rem;
  }

  input{
    height:46px;
    font-size:.95rem;
    border-radius:12px;
  }

  .btn{
    height:48px;
    border-radius:14px;
    font-size:.95rem;
  }

  .two{
    grid-template-columns:1fr;
    gap:12px;
  }

  .brow{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding:10px;
  }

  .bname{
    font-size:.95rem;
  }

  .bsub{
    font-size:.85rem;
  }

  .actions{
    width:100%;
    justify-content:flex-start;
    gap:6px;
  }

  .small{
    height:36px;
    font-size:.85rem;
    border-radius:12px;
    padding:0 10px;
  }

  .revLine,
  .revItem{
    font-size:.9rem;
  }
}
@media (max-width: 375px){
  .head h1{
    font-size:1.7rem;
  }

  .card{
    padding:.9rem;
  }

  input{
    height:44px;
    font-size:.9rem;
  }

  .btn{
    height:46px;
    font-size:.9rem;
  }

  .small{
    height:34px;
    font-size:.8rem;
  }
}