/* API Key Generator page styles */
.ak-form { max-width: 980px; margin: 0 auto; }
.ak-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ak-field { display: flex; flex-direction: column; gap: 6px; }
.ak-field input, .ak-field select, .ak-field textarea { padding: 10px 12px; border: 1px solid #e1e1e1; border-radius: 6px; font-size: 14px; }

/* Range slider – lớn hơn và dễ kéo */
.ak-field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  height: 16px; /* tăng vùng tương tác */
  background: transparent;
  margin-top: 4px;
}
/* WebKit track */
.ak-field input[type="range"]::-webkit-slider-runnable-track {
  height: 12px;
  background: linear-gradient(180deg, #eef3fb, #e6ecf6);
  border-radius: 8px;
  border: 1px solid #d8e1ee;
}
/* WebKit thumb */
.ak-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #0b63ce;
  margin-top: -7px; /* căn giữa thumb với track */
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
/* Firefox track */
.ak-field input[type="range"]::-moz-range-track {
  height: 12px;
  background: linear-gradient(180deg, #eef3fb, #e6ecf6);
  border-radius: 8px;
  border: 1px solid #d8e1ee;
}
/* Firefox thumb */
.ak-field input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #0b63ce;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
/* Edge/IE (legacy) */
.ak-field input[type="range"]::-ms-track {
  height: 12px;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.ak-field input[type="range"]::-ms-fill-lower,
.ak-field input[type="range"]::-ms-fill-upper {
  background: #e6ecf6;
  border: 1px solid #d8e1ee;
  border-radius: 8px;
}
.ak-field input[type="range"]::-ms-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #0b63ce;
}

.ak-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.btn-primary { background: #0b63ce; color: #fff; border: none; padding: 10px 16px; border-radius: 6px; cursor: pointer; }
.btn-secondary { background: #f5f5f5; color: #333; border: 1px solid #ddd; padding: 10px 16px; border-radius: 6px; cursor: pointer; }
.ak-output { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.ak-output textarea { min-height: 80px; resize: vertical; }
.ak-marks { display: grid; grid-template-columns: repeat(5, 1fr); font-size: 13px; color: #666; margin-top: 6px; }
.ak-marks span { text-align: center; }

@media (max-width: 768px) {
  .ak-row { grid-template-columns: 1fr; gap: 12px; }
}