:root{--bg-page: #F5F4F1;--bg-card: #FFFFFF;--bg-surface: #EDECEA;--border-strong: #D1D0CD;--border-subtle: #E5E4E1;--primary-green: #3D8A5A;--text-primary: #1A1918;--text-secondary: #6D6C6A;--text-tertiary: #9C9B99;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px}*{box-sizing:border-box}body{font-family:Outfit,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;padding:var(--spacing-lg);background-color:var(--bg-page)}.container{background:var(--bg-card);padding:var(--spacing-lg);border-radius:var(--radius-lg);box-shadow:0 2px 12px rgba(26,25,24,.05);width:100%;max-width:400px}h1{font-size:26px;font-weight:600;color:var(--text-primary);margin:0 0 var(--spacing-lg) 0;text-align:center}.options{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.options label{display:flex;align-items:center;gap:var(--spacing-sm);padding:4px 0;cursor:pointer;font-size:15px;font-weight:500;color:var(--text-primary)}.options input[type=checkbox]{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:4px;border:1px solid var(--border-strong);background-color:var(--bg-surface);cursor:pointer;position:relative;flex-shrink:0}.options input[type=checkbox]:checked{background-color:var(--primary-green);border-color:var(--primary-green)}.options input[type=checkbox]:checked:after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.length{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.length label{font-size:15px;font-weight:500;color:var(--text-primary)}.length input[type=number]{width:80px;height:40px;padding:0;text-align:center;font-size:18px;font-weight:600;font-family:Outfit,sans-serif;color:var(--text-primary);background-color:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm)}.length input[type=number]:focus{outline:none;border-color:var(--primary-green)}#generate{width:100%;height:48px;background-color:var(--primary-green);color:#fff;border:none;border-radius:var(--radius-md);font-size:15px;font-weight:600;font-family:Outfit,sans-serif;cursor:pointer;margin-bottom:var(--spacing-lg);transition:opacity .2s}#generate:hover{opacity:.9}#generate:active{opacity:.8}.password-display{display:flex;gap:var(--spacing-sm);padding:var(--spacing-md);background-color:var(--bg-surface);border-radius:var(--radius-md)}.password-field{flex:1;display:flex;align-items:center;min-width:0}#password{width:100%;height:40px;padding:0;border:none;background:transparent;font-size:16px;font-weight:500;font-family:Outfit,monospace;color:var(--text-secondary);letter-spacing:.3em}#password:focus{outline:none}#password[type=password]{font-size:24px;font-family:Verdana,sans-serif}.icon-button{width:40px;height:40px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color .2s}.icon-button:hover{background-color:var(--bg-surface)}.icon-button svg{width:20px;height:20px;color:var(--text-tertiary)}#copy{width:80px;height:40px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-size:14px;font-weight:600;font-family:Outfit,sans-serif;color:var(--text-primary);cursor:pointer;flex-shrink:0;transition:background-color .2s}#copy:hover{background-color:var(--bg-surface)}@keyframes passwordGenerated{0%{background-color:#e8f5e9;transform:scale(1)}50%{background-color:#c8e6c9;transform:scale(1.02)}to{background-color:transparent;transform:scale(1)}}.password-generated{animation:passwordGenerated .5s ease-in-out}@media (min-width: 768px){body{padding:40px}.container{max-width:600px;padding:32px;box-shadow:0 4px 24px rgba(26,25,24,.06)}h1{font-size:32px;font-weight:700}.options label{font-size:16px;padding:6px 0}.options input[type=checkbox]{width:24px;height:24px;border-radius:6px;border-width:1.5px}.options input[type=checkbox]:checked:after{left:7px;top:3px;width:6px;height:12px}.length{gap:20px}.length label{font-size:16px}.length input[type=number]{width:100px;height:48px;font-size:20px;border-radius:10px;border-width:1.5px}#generate{height:56px;font-size:16px;border-radius:12px}.password-display{gap:12px;padding:20px;border-radius:12px}#password{height:48px;font-size:18px}.icon-button{width:48px;height:48px;border-radius:10px;border-width:1.5px}.icon-button svg{width:24px;height:24px}#copy{width:100px;height:48px;font-size:15px;border-radius:10px;border-width:1.5px}}