/* style.css - Dark theme, centered layout */

body {
  padding-top: 50px;
  margin: 0;
  background-color: #121212;
  color: #eee;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  user-select: none;
}

#app {
  text-align: center;
  max-width: 600px;
  min-width: 400px;
  width: 90%;
  background: #1e1e1e;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 15px #0af;
}

h1 {
  margin-top: 65px;
  margin-bottom: 5px;
  font-size: 8;
  size: 8;
}

.controls {
  margin-bottom: 20px;
}

.btn {
    text-decoration:none;
  background-color: #0af;
  border: none;
  padding: 6px 6px;
  margin: 0 5px;
  font-size: 1rem;
  color: white;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  user-select: none;
}

.btn:hover {
  background-color: #08c;
}
.diagnostic-container {
  margin-top: 10px;
}

.copy-btn {
  margin-left: 10px;
}

#diagnostic {
  background: #222;
  border-radius: 8px;
  padding: 15px;
  font-family: monospace;
  font-size: 0.9rem;
  min-height: 50px;
  white-space: pre-wrap;
  text-align: left;
  overflow-y: auto;
  max-height: 150px;
}
/* Dark, centered theme */
body, html {
  height:100%; margin:0;
  background:#121212; color:#eee;
  font-family:sans-serif;
  display:flex; align-items:center; justify-content:center;
}
#app {
  text-align:center; width:100%; max-width:400px; padding:1em;
}
h1 { margin-bottom:1em; }
.controls { margin-bottom:1em; }

.sliders {
  margin:1em 0;
}
.sliders label {
  display:block; margin:0.5em 0;
  font-size:0.9rem; user-select:none;
}
.sliders input[type=range] {
  width:100%;
  margin-top:0.3em;
}
.diagnostic {
  margin-top:15px;
  font-size:16px;
  transition:opacity 0.5s ease;
}
.chan {
      width:150px; /* adjust as needed */
  background-color: #000000;
  font-size: 18px; /* or any size you want, e.g. 20px, 22px */
  color: #fff;
  height: 35px;
  outline: none;
  border: none;
}

.chan:focus, .chan:active {
  font-size: 18px; /* or any size you want, e.g. 20px, 22px */
  color: #fff;
  height: 35px;
  background-color: #000000 !important;
  color: #fff !important;
  outline: none;
  box-shadow: none;
  border: none;
}
.chan:-webkit-autofill,
.chan:-webkit-autofill:hover,
.chan:-webkit-autofill:focus,
.chan:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #000000 inset !important;
  -webkit-text-fill-color: #fff !important;
  background-color: #000000 !important;
  color: #fff !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
}

button.copy-btn {
    background:#43a047;
    border:none;
    color:white;
    padding:12px 20px;
    font-size:16px;
    border-radius:8px;
    cursor:pointer;
    margin-top:20px;
}
button.copy-btn:hover {
    background:#2e7d32;
}