.btn { padding: 0.8rem; border: none; border-radius: 5px; cursor: pointer; font-size: 12px; background-color: var(--primary-color); color: var(--light-color); }
.input { padding: 0.8rem; font-size: 1rem; border: 1px solid var(--primary-color); border-radius: 5px; background-color: var(--light-color); text-align: center; }

/* Desktop and Tablet Styles */
@media (min-width: 768px) {
  .output-box { flex-wrap:nowrap!important; }
}
.output-box { display: flex; gap: 6px; flex-wrap: wrap; }
#password-output { flex: 1 100%; }
#copy-btn, #generate-btn { flex: 1 auto; }
.strength-meter { width: 100%; background-color: var(--light-color); border-radius: 5px; height: 10px; overflow: hidden; }
.strength-bar { height: 100%; transition: all 0.3s ease-in-out; }
.controls { text-align: left; display: flex; gap: 32px; flex-wrap: wrap; }
#password-length { width: 100%; }
.controls label { display: block; margin-bottom: 5px; }
.history-controls { display: flex; flex-direction: column; gap: 12px; }
.storage-choice { display: flex; column-gap: 6px; }
.storage-choice input[type=radio] { display: none; }
.storage-choice span { display: inline-block; }
.storage-choice input[type=radio]:checked+span { background-color: var(--primary-color); color: var(--light-color); }
.storage-choice input[type=radio]:not(:checked)+span { background-color: var(--light-color); color: var(--primary-color); }
#history-list { list-style-type: none; padding: 0; border: 1px solid var(--primary-color); border-radius: 5px; background-color: var(--light-color); }
#history-list li { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 1rem; border-bottom: 1px solid var(--primary-color); font-family: monospace; }
#history-list li:last-child { border-bottom: none; }