body {font-family: "Segoe UI",sans-serif;background: transparent;margin: 0;padding: 0;}
.password-generator-container {max-width: 450px;margin: 2rem auto;padding: 1.5rem;background: rgba(255,255,255,.93);border-radius: 20px;box-shadow: 0 8px 25px rgba(0,0,0,.08);text-align: center;}
.password-generator-container h2 {margin-bottom: 1rem;color: #007acc;}
.output-group {display: flex;align-items: center;margin-bottom: 1rem;}
#passwordOutput {flex: 1;padding: .7rem;font-size: 1.1rem;border: 1px solid #ccc;border-radius: 12px 0 0 12px;outline: none;}
#copyBtn {padding: .7rem 1rem;border: none;border-radius: 0 12px 12px 0;background: #007acc;color: white;font-size: 1rem;cursor: pointer;transition: background .3s;}
#copyBtn:hover {background: #005fa3;}
.controls {text-align: left;margin-top: 1rem;}
.controls label {display: block;margin-top: .8rem;color: #333;font-weight: 500;}
.controls input[type="text"] {width: 100%;padding: .5rem;margin-top: .3rem;border-radius: 8px;border: 1px solid #ccc;}
#lengthSlider {width: 100%;}
.feedback {margin-top: 1rem;text-align: left;font-size: .9rem;color: #444;}
.generate-btn {margin-top: 1.5rem;padding: .7rem 1.5rem;font-size: 1rem;background: #007acc;color: white;border: none;border-radius: 12px;cursor: pointer;transition: background .3s ease;}
.generate-btn:hover {background: #005fa3;}
@media (max-width: 480px) {.password-generator-container {margin: 1rem;padding: 1rem;}
	.output-group {flex-direction: column;}
	#passwordOutput, #copyBtn {border-radius: 12px;width: 100%;}
	#copyBtn {margin-top: .5rem;}}