.developer-layout{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
  gap:20px;
  align-items:start;
  margin-bottom:22px;
}

.api-secret-card{
  margin-bottom:20px;
  border-color:#e4ca70;
  background:#fff9e3;
}

.developer-copy-field{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  margin:14px 0;
}

.developer-copy-field input{
  min-width:0;
  border:1px solid var(--border);
  border-radius:13px;
  padding:13px;
  font-family:monospace;
}

.developer-scope-list{
  display:grid;
  gap:9px;
  margin:16px 0;
  padding:0;
  border:0;
}

.developer-scope-list legend{
  margin-bottom:8px;
  font-weight:850;
}

.developer-scope-option{
  display:flex!important;
  align-items:flex-start;
  gap:11px!important;
  padding:13px;
  border:1px solid var(--border);
  border-radius:13px;
  cursor:pointer;
}

.developer-scope-option input{
  width:18px!important;
  height:18px;
  margin-top:2px;
  flex:0 0 auto;
}

.developer-scope-option span{
  display:grid;
  gap:3px;
}

.developer-scope-option small{
  color:var(--muted);
  font-weight:500;
}

.developer-code{
  overflow:auto;
  padding:16px;
  border-radius:14px;
  background:#071b36;
  color:#e7f1f7;
  line-height:1.55;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.api-client-list,
.webhook-subscription-list{
  display:grid;
  gap:14px;
}

.api-client-row,
.admin-api-client-row,
.webhook-subscription-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
}

.api-client-row h2,
.admin-api-client-row h2,
.webhook-subscription-row h2{
  margin:7px 0;
  overflow-wrap:anywhere;
}

.api-client-row p,
.admin-api-client-row p,
.webhook-subscription-row p{
  margin:0 0 8px;
  color:var(--muted);
}

.api-client-row small,
.admin-api-client-row small{
  color:var(--muted);
}

.api-scope-pills{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:10px 0;
}

.api-scope-pills span{
  display:inline-flex;
  padding:5px 8px;
  border-radius:999px;
  background:#edf3f8;
  color:#31577d;
  font-size:.7rem;
  font-weight:800;
}

.api-client-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
}

.api-client-actions form{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}

.admin-api-limits{
  display:grid;
  grid-template-columns:100px 130px auto auto;
  gap:8px;
  align-items:end;
}

.admin-api-limits label{
  display:grid;
  gap:5px;
  font-size:.75rem;
  font-weight:750;
}

.admin-api-limits input{
  width:100%;
  border:1px solid var(--border);
  border-radius:10px;
  padding:9px;
}

.developer-documentation{
  display:grid;
  gap:18px;
}

.developer-endpoint-list{
  display:grid;
}

.developer-endpoint-list>div{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:7px 15px;
  padding:15px 0;
  border-top:1px solid var(--border);
}

.developer-endpoint-list p{
  grid-column:1/-1;
  margin:0;
  color:var(--muted);
}

.developer-endpoint-list span{
  display:inline-flex;
  padding:5px 8px;
  border-radius:999px;
  background:#eaf8f3;
  color:#087254;
  font-size:.7rem;
  font-weight:850;
}

.webhook-delivery-list{
  display:grid;
  gap:10px;
}

.webhook-delivery-row{
  padding:14px;
  border:1px solid var(--border);
  border-radius:14px;
}

.webhook-delivery-row summary{
  display:grid;
  grid-template-columns:auto minmax(160px,1fr) minmax(130px,1fr) auto auto;
  gap:12px;
  align-items:center;
  cursor:pointer;
}

.webhook-delivery-row time{
  color:var(--muted);
  font-size:.76rem;
}

.webhook-delivery-details{
  margin-top:15px;
  padding-top:15px;
  border-top:1px solid var(--border);
}

@media(max-width:900px){
  .developer-layout{
    grid-template-columns:1fr;
  }

  .api-client-row,
  .admin-api-client-row,
  .webhook-subscription-row{
    flex-direction:column;
  }

  .api-client-actions{
    justify-content:flex-start;
  }

  .admin-api-limits{
    width:100%;
    grid-template-columns:1fr 1fr;
  }

  .webhook-delivery-row summary{
    grid-template-columns:1fr;
  }
}

@media(max-width:650px){
  .developer-copy-field{
    grid-template-columns:1fr;
  }

  .admin-api-limits{
    grid-template-columns:1fr;
  }
}