.page-title-section {
  border-top: 1px solid #edf2fa;
}

.page-title-content h1 {
  font-size: 40px;
  margin-bottom: 10px;
}

.page-title-content p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.qr-card {
  border: 1px solid #e7edf7;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(16, 42, 80, 0.06);
}

.qr-card h3 {
  font-size: 22px;
  margin-bottom: 8px;
}

.qr-card .form-control,
.qr-card .form-select {
  border-color: #d8e2f0;
  border-radius: 8px;
  min-height: 46px;
}

.qr-card .form-control:focus,
.qr-card .form-select:focus {
  border-color: #1f6cf0;
  box-shadow: 0 0 0 0.2rem rgba(31, 108, 240, 0.15);
}

.qr-card .main-btn {
  border: none;
}

.dip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
  gap: 10px;
}

.dip-item {
  border: 1px solid #e1e9f5;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  background: #f9fbff;
}

.dip-item .label {
  color: #6f7785;
  font-size: 13px;
}

.dip-item .state {
  display: inline-block;
  margin-top: 6px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  border-radius: 999px;
  padding: 8px 10px;
}

.dip-item.on {
  border-color: #b8dfcb;
  background: #f1fbf5;
}

.dip-item.on .state {
  color: #1f8f56;
  background: #dff5e9;
}

.dip-item.off {
  border-color: #dce5f2;
  background: #f6f8fb;
}

.dip-item.off .state {
  color: #6a7483;
  background: #e9eef5;
}

@media (max-width: 767px) {
  .page-title-content h1 {
    font-size: 30px;
  }

  .qr-card {
    padding: 20px !important;
  }

  .qr-card h3 {
    font-size: 20px;
  }
}