body { font-size: 100%; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background-color: #f5f5f5; margin: 0; }
        #password-generator { max-width: 800px; margin: 1.5rem auto; padding: 1rem 1.5rem; background: #fff; border-radius: 0.5rem; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
        #nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
        #nav-links a, #lang-switch a { margin-right: .75rem; text-decoration: none; color: #555; }
        #lang-switch a { margin-right: 0; margin-left: .25rem; }
        #nav-links a.active, #lang-switch a.active { font-weight: bold; text-decoration: underline; }
        h1 { margin-top: 0; }
        .info { padding: 10px; border-left: 2px solid lightblue; background-color: #FCFCFC; margin-top: 10px; margin-bottom: 10px; }
        .info h2 { font-size: 1.2rem; margin-top: 0; }
        .info ol { list-style-type: none; margin-left: 0; padding-left: 0; }
        #password { color: #444; font-size: 1.5rem; border: 1px solid #999; padding: 5px; margin-bottom: 5px; max-width: 100%; word-break: break-all; }
        #password[hidden], #strength-container[hidden] { display: none; }
        .field { margin-bottom: 10px; }
        form input[type="number"], form select { padding: 0.25rem; font-size: 1rem; }
        #buttons button { padding: 0.25rem 0.75rem; font-size: 1rem; text-transform: none; border: 1px solid #444; border-radius: 0.25rem; cursor: pointer; background-color: #f8f8f8; }
        #buttons { margin-bottom: 1rem; }
        #buttons button:disabled { opacity: 0.5; cursor: not-allowed; }
        .messages { margin-bottom: 1rem; padding: 0.5rem 0.75rem; background-color: #ffecec; border-left: 3px solid #ff6b6b; border-radius: 0.25rem; color: #a33; }
        .messages:empty { display: none; }
        .field-checkboxes label { display: block; margin-bottom: 0.25rem; }
        #qrcode-container { margin-top: 10px; display: none; }
        #strength-container { margin-top: 0.5rem; }
        #strength-bar-wrapper { width: 100%; height: 8px; background: #eee; border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
        #strength-bar { height: 100%; width: 0; background: red; transition: width 0.3s ease, background-color 0.3s ease; }
        #strength-text { font-size: 0.9rem; color: #555; }
        @media (max-width: 640px) { #password-generator { margin: 0; border-radius: 0; } #nav { align-items: flex-start; gap: .75rem; } #buttons button { margin-bottom: .35rem; } }