.cst21-shell{
  background:#0f172a;
  color:#fff;
  border-radius:24px;
  padding:24px;
  box-shadow:0 18px 48px rgba(2,6,23,.24);
}
.cst21-header h1{margin:0 0 8px;font-size:34px}
.cst21-header p{margin:0;color:#cbd5e1}
.cst21-notice{
  margin:16px 0;
  padding:12px 14px;
  border-radius:14px;
  font-weight:700;
}
.cst21-success{background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.28)}
.cst21-danger{background:#dc2626 !important}
.cst21-filter{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:18px 0;
}
.cst21-list{display:grid;grid-template-columns:1fr;gap:14px}
.cst21-card,.cst21-empty,.cst21-tile{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:16px;
}
.cst21-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cst21-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cst21-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.cst21-meta{color:#cbd5e1;font-size:13px;margin:6px 0 0}
.cst21-code{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  word-break:break-all;
  color:#cbd5e1;
}
.cst21-shell input,.cst21-shell textarea,.cst21-shell select{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  background:#111827;
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  padding:10px 12px;
  margin-bottom:10px;
}
.cst21-shell button,.cst21-link-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#2563eb;
  color:#fff;
  border:0;
  border-radius:14px;
  padding:10px 14px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
}
.cst21-shell label{
  display:block;
  font-weight:700;
  margin-bottom:6px;
}
@media (max-width:900px){
  .cst21-grid,.cst21-grid2{grid-template-columns:1fr}
}