.lists-page{
  width:100%;
  min-height:100vh;
  padding:116px clamp(22px,3vw,56px) 120px;
}

.lists-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px;
}

.lists-head p,
.create-list-copy p{
  margin:0;
  color:#73777e;
  font-size:11px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.lists-head h1{
  margin:7px 0 5px;
  font-size:clamp(38px,5vw,62px);
  letter-spacing:-.055em;
  line-height:.95;
}

.lists-head > div > span{
  color:#747880;
  font-size:13px;
}

.lists-owner-link{
  color:#8b8f96;
  font-size:13px;
  text-decoration:none;
}

.create-list-panel{
  display:grid;
  grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr);
  gap:28px;
  margin-bottom:34px;
  padding:22px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:19px;
  background:rgba(255,255,255,.018);
}

.create-list-copy h2{
  margin:7px 0;
  font-size:25px;
  letter-spacing:-.04em;
}

.create-list-copy span{
  color:#696d74;
  font-size:12px;
}

.create-list-fields{
  display:grid;
  gap:9px;
}

.create-list-fields input,
.create-list-fields textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  outline:0;
  background:#121417;
  color:#ededee;
  padding:12px 13px;
}

.create-list-fields textarea{
  min-height:84px;
  resize:vertical;
}

.create-list-fields button{
  min-height:42px;
  border:0;
  border-radius:12px;
  background:#ececee;
  color:#111316;
  cursor:pointer;
  font-weight:700;
}

#createListStatus{
  min-height:16px;
  margin:0 2px;
  color:#777b82;
  font-size:11px;
}

.lists-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
}

.list-card{
  min-height:190px;
  display:flex;
  flex-direction:column;
  padding:20px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  background:rgba(255,255,255,.016);
  color:inherit;
  text-decoration:none;
  transition:transform 140ms ease,border-color 140ms ease,background 140ms ease;
}

.list-card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.026);
}

.list-card-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:#656970;
  font-size:11px;
}

.list-card h2{
  margin:28px 0 8px;
  font-size:24px;
  letter-spacing:-.04em;
}

.list-card p{
  margin:0;
  color:#8b8e95;
  font-size:13px;
  line-height:1.45;
  overflow-wrap:anywhere;
}

.lists-empty{
  grid-column:1/-1;
  color:#70747b;
}

@media(max-width:720px){
  .create-list-panel{grid-template-columns:1fr}
}