.headset-tool {
  width: 100%;
  max-width: 800px;
  min-height: 600px;
  margin: 40px auto !important;
  padding: 24px;
  background: #fff;
  border: 1px solid #e7e9ee;
  border-radius: 20px;
  box-shadow: 0 12px 35px rgba(0,0,0,.10);
}

.tool-header {
  text-align: center;
  margin-bottom: 24px;
}

.tool-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 10px;
  background: #f0f1f3;
  border-radius: 16px;
  font-size: 27px;
}

.tool-header h2 {
  font-size: 25px;
  font-weight: 750;
  margin-bottom: 7px;
}

.tool-header p {
  color: #777e89;
  font-size: 13px;
  margin: 0;
}

.tool-column {
  height: 100%;
  padding: 18px;
  border: 1px solid #e8eaf0;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 4px 13px rgba(0,0,0,.045);
}

.section-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
}

.audio-preview {
  min-height: 175px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px;
  text-align: center;
  background: linear-gradient(145deg,#111,#383838);
  color: #fff;
  border-radius: 13px;
  margin-bottom: 18px;
}

.headphone-emoji {
  font-size: 43px;
  margin-bottom: 10px;
}

.status-text {
  font-size: 15px;
  font-weight: 700;
}

.status-subtitle {
  margin-top: 6px;
  color: #c3c3c3;
  font-size: 11px;
  line-height: 1.5;
}

.equalizer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  margin-top: 12px;
}

.equalizer span {
  width: 4px;
  height: 7px;
  border-radius: 5px;
  background: #c5c8ce;
}

.equalizer.active span {
  animation: equalize .55s ease-in-out infinite alternate;
  background: #fff;
}

.equalizer span:nth-child(2n) { animation-delay: .2s; }
.equalizer span:nth-child(3n) { animation-delay: .35s; }

@keyframes equalize {
  from { height: 5px; }
  to { height: 26px; }
}

.audio-btn {
  width: 100%;
  padding: 11px 8px;
  border: 1px solid #292929;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg,#090909,#414141);
  font-size: 13px;
  font-weight: 600;
  transition: .2s;
}

.audio-btn:hover {
  color: #fff;
  background: linear-gradient(135deg,#333,#050505);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}

.stop-btn {
  width: 100%;
  padding: 11px;
  color: #292929;
  background: #fff;
  border: 1px solid #d8dce3;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
}

.stop-btn:hover { background: #f1f2f4; }

.form-label {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}

.form-select {
  min-height: 42px;
  font-size: 13px;
  border-color: #dfe2e8;
  border-radius: 9px;
  box-shadow: none !important;
}

.form-range::-webkit-slider-thumb { background: #202020; }
.form-range::-moz-range-thumb { background: #202020; }

.volume-value {
  font-size: 12px;
  font-weight: 700;
}

.setting-card {
  padding: 15px;
  margin-bottom: 16px;
  border: 1px solid #e9ebf0;
  background: #fafbfc;
  border-radius: 11px;
}

.setting-label {
  display: block;
  font-size: 12px;
  color: #737985;
  margin-bottom: 6px;
}

.setting-value {
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.status-pill {
  display: inline-block;
  margin-top: 9px;
  padding: 5px 10px;
  background: #ededed;
  color: #353535;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}

.footer-note {
  text-align: center;
  color: #8b9099;
  font-size: 11px;
  margin: 18px 0 0;
}

@media (max-width: 575px) {
  body { padding: 10px 7px; }
  .headset-tool { padding: 16px 12px; border-radius: 15px; }
  .tool-column { padding: 14px; }
  .tool-header h2 { font-size: 22px; }
  .audio-preview { min-height: 155px; }
}