.loginContainer{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px}.loginContainer .loginForm{background:#fff;border-radius:20px;padding:40px 35px;box-shadow:0 20px 40px #0000001a;width:100%;max-width:400px;position:relative;overflow:hidden}.loginContainer .loginForm:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#667eea,#764ba2)}.loginContainer .loginForm .loginHeader{text-align:center;margin-bottom:35px}.loginContainer .loginForm .loginHeader .loginIcon{width:70px;height:70px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;color:#fff;font-size:28px;box-shadow:0 8px 20px #667eea4d}.loginContainer .loginForm .loginHeader h2{margin:0 0 8px;font-size:28px;font-weight:700;color:#333;letter-spacing:-.5px}.loginContainer .loginForm .loginHeader .loginSubtitle{margin:0;color:#666;font-size:15px;font-weight:400}.loginContainer .loginForm .inputGroup{display:flex;flex-direction:column;gap:20px;margin-bottom:25px}.loginContainer .loginForm .inputGroup .inputField{position:relative;display:flex;align-items:center}.loginContainer .loginForm .inputGroup .inputField .inputIcon{position:absolute;left:15px;color:#999;font-size:16px;z-index:2;transition:color .3s ease}.loginContainer .loginForm .inputGroup .inputField input{width:100%;padding:16px 20px 16px 45px;border:2px solid #e1e5e9;border-radius:12px;font-size:16px;transition:all .3s ease;background:#fafbfc;color:#333}.loginContainer .loginForm .inputGroup .inputField input::placeholder{color:#999;font-weight:400}.loginContainer .loginForm .inputGroup .inputField input:focus{outline:none;border-color:#667eea;background:#fff;box-shadow:0 0 0 3px #667eea1a}.loginContainer .loginForm .inputGroup .inputField:focus-within .inputIcon{color:#667eea}.loginContainer .loginForm .inputGroup .inputField.error input{border-color:#e74c3c;background:#fdf2f2}.loginContainer .loginForm .inputGroup .inputField.error .inputIcon{color:#e74c3c}.loginContainer .loginForm .inputGroup .inputField.passwordField .passwordToggle{position:absolute;right:15px;background:none;border:none;color:#999;cursor:pointer;padding:8px;border-radius:6px;transition:all .3s ease;z-index:2}.loginContainer .loginForm .inputGroup .inputField.passwordField .passwordToggle:hover{color:#667eea;background:#667eea1a}.loginContainer .loginForm .inputGroup .inputField.passwordField .passwordToggle:focus{outline:none;color:#667eea}.loginContainer .loginForm .errorMessage{display:flex;align-items:center;gap:8px;color:#e74c3c;background:#fdf2f2;padding:12px 15px;border-radius:8px;font-size:14px;margin-bottom:20px;border-left:4px solid #e74c3c}.loginContainer .loginForm .errorMessage .errorIcon{font-size:16px}.loginContainer .loginForm .loginButton{width:100%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;padding:16px 24px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:10px;position:relative;overflow:hidden}.loginContainer .loginForm .loginButton:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.loginContainer .loginForm .loginButton:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #667eea4d}.loginContainer .loginForm .loginButton:hover:not(:disabled):before{left:100%}.loginContainer .loginForm .loginButton:active:not(:disabled){transform:translateY(0)}.loginContainer .loginForm .loginButton:disabled{opacity:.7;cursor:not-allowed;transform:none}.loginContainer .loginForm .loginButton.loading .spinner{animation:spin 1s linear infinite}.loginContainer .loginForm .loginButton .spinner{font-size:14px}.loginContainer .loginForm .loginFooter{text-align:center;margin-top:25px}.loginContainer .loginForm .loginFooter .forgotPassword{color:#667eea;text-decoration:none;font-size:14px;font-weight:500;transition:color .3s ease}.loginContainer .loginForm .loginFooter .forgotPassword:hover{color:#764ba2;text-decoration:underline}.loginContainer .loginForm .loginFooter .registerButton{background:none;border:none;color:#666;font-size:14px;cursor:pointer;transition:color .3s ease;padding:8px 0}.loginContainer .loginForm .loginFooter .registerButton strong{color:#667eea;font-weight:600}.loginContainer .loginForm .loginFooter .registerButton:hover{color:#333}.loginContainer .loginForm .loginFooter .registerButton:hover strong{color:#764ba2}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 480px){.loginContainer{padding:15px}.loginContainer .loginForm{padding:30px 25px;border-radius:15px}.loginContainer .loginForm .loginHeader{margin-bottom:25px}.loginContainer .loginForm .loginHeader .loginIcon{width:60px;height:60px;font-size:24px}.loginContainer .loginForm .loginHeader h2{font-size:24px}.loginContainer .loginForm .inputGroup{gap:15px}.loginContainer .loginForm .inputGroup .inputField input{padding:14px 18px 14px 40px;font-size:15px}.loginContainer .loginForm .loginButton{padding:14px 20px;font-size:15px}}@media (prefers-color-scheme: dark){.loginContainer{background:linear-gradient(135deg,#2c3e50,#34495e)}.loginContainer .loginForm{background:#2c3441;color:#e4e4e4}.loginContainer .loginForm .loginHeader h2{color:#e4e4e4}.loginContainer .loginForm .loginHeader .loginSubtitle{color:#b0b0b0}.loginContainer .loginForm .inputGroup .inputField input{background:#3a4651;border-color:#4a5568;color:#e4e4e4}.loginContainer .loginForm .inputGroup .inputField input::placeholder{color:#a0aec0}.loginContainer .loginForm .inputGroup .inputField input:focus{background:#4a5568}.loginContainer .loginForm .inputGroup .inputField.error input{background:#4a2c2a}.loginContainer .loginForm .errorMessage{background:#4a2c2a;color:#ff6b6b}}.appCard{background-color:#2c2d49;border:1px solid rgb(110,110,110);border-radius:10px;padding:1.5em;text-decoration:none;height:229px;width:229px;min-width:229px;position:relative;overflow:hidden}.appCard:hover{cursor:pointer}.appCard:hover .content{transform:translateY(-50px)}.appCard:hover .description{opacity:1;height:auto;white-space:normal;text-overflow:unset;transform:translateY(0);animation:slideInDescription .4s ease-out}.appCard .content{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,#2c2d49,#2c2d49e6);padding:1em;transition:transform .3s ease-in-out;transform:translateY(0)}.appCard .title{color:#fff;font-size:16px;font-weight:700;margin-bottom:.5em}.appCard .description{color:#ccc;font-size:12px;line-height:1.4;opacity:.7;height:1.4em;overflow:hidden;transition:all .4s cubic-bezier(.25,.46,.45,.94);text-overflow:ellipsis;white-space:nowrap;transform:translateY(5px)}@keyframes slideInDescription{0%{opacity:.7;transform:translateY(10px);max-height:1.4em}50%{opacity:.85;transform:translateY(5px)}to{opacity:1;transform:translateY(0);max-height:100px}}.appCard .version{position:absolute;top:10px;right:10px;background-color:#fff;color:#2c2d49;padding:.2em .5em;border-radius:25px;font-size:12px}.applications{padding:.5rem;display:flex;flex-direction:column;gap:1rem}.applications .title-container{display:flex;justify-content:space-between;align-items:center}.applications .title-container .btn-add-app{padding:.75rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:.95rem;font-weight:600;transition:all .3s ease;box-shadow:0 4px 15px #667eea66}.applications .title-container .btn-add-app:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea99}.applications .title-container .btn-add-app:disabled{opacity:.6;cursor:not-allowed}.applications .modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .2s ease}.applications .modal-overlay .modal-content{background:#fff;padding:2.5rem;border-radius:12px;max-width:500px;width:90%;box-shadow:0 20px 60px #0000004d;animation:slideUp .3s ease}.applications .modal-overlay .modal-content h2{margin-top:0;margin-bottom:2rem;color:#2c3e50;font-size:1.5rem;font-weight:700}.applications .modal-overlay .modal-content form .form-group{margin-bottom:1.5rem}.applications .modal-overlay .modal-content form .form-group label{display:block;margin-bottom:.75rem;color:#2c3e50;font-weight:600;font-size:.95rem}.applications .modal-overlay .modal-content form .form-group input[type=text],.applications .modal-overlay .modal-content form .form-group input[type=url]{width:100%;padding:.875rem;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;box-sizing:border-box;transition:border-color .3s ease,box-shadow .3s ease}.applications .modal-overlay .modal-content form .form-group input[type=text]:focus,.applications .modal-overlay .modal-content form .form-group input[type=url]:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.applications .modal-overlay .modal-content form .form-group.checkbox label{display:flex;align-items:center;gap:.75rem;cursor:pointer;margin-bottom:0;font-weight:500}.applications .modal-overlay .modal-content form .form-group.checkbox label input[type=checkbox]{cursor:pointer;width:18px;height:18px;accent-color:#667eea}.applications .modal-overlay .modal-content form .form-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:2.5rem}.applications .modal-overlay .modal-content form .form-actions button{padding:.875rem 1.75rem;border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:600;transition:all .3s ease}.applications .modal-overlay .modal-content form .form-actions button[type=button]{background-color:#e0e0e0;color:#333}.applications .modal-overlay .modal-content form .form-actions button[type=button]:hover:not(:disabled){background-color:#d0d0d0}.applications .modal-overlay .modal-content form .form-actions button[type=submit]{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 15px #667eea4d}.applications .modal-overlay .modal-content form .form-actions button[type=submit]:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.applications .modal-overlay .modal-content form .form-actions button:disabled{opacity:.6;cursor:not-allowed}.applications .apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;padding:.5rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.user-assignments{padding:1.5rem;background:#fff;border-radius:12px;box-shadow:0 4px 15px #00000014}.user-assignments.loading{text-align:center;padding:3rem;color:#666;font-size:1.1rem}.user-assignments table{width:100%;border-collapse:collapse}.user-assignments table thead{background:linear-gradient(135deg,#2c3e50,#34495e)}.user-assignments table thead th{padding:1rem;text-align:left;color:#fff;font-weight:600;font-size:.95rem;letter-spacing:.3px;text-transform:uppercase}.user-assignments table tbody tr{border-bottom:1px solid #e8e8e8;transition:background-color .2s ease}.user-assignments table tbody tr:hover{background-color:#f8f9fa}.user-assignments table tbody tr td{padding:1rem;color:#333}.user-assignments table tbody tr td:first-child{text-align:center;color:#999;cursor:grab}.user-assignments table tbody tr td:first-child:hover{color:#667eea}.user-assignments table .user-info{display:flex;align-items:center;gap:.75rem}.user-assignments table .user-info img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid #e0e0e0}.user-assignments table .user-info .avatar{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:700;font-size:1rem;border:2px solid #e0e0e0}.user-assignments table .user-info .user-details{display:flex;flex-direction:column;gap:.25rem}.user-assignments table .user-info .user-details>div:first-child{font-weight:600;color:#2c3e50;font-size:.95rem}.user-assignments table .user-info .user-details .email{font-size:.85rem;color:#999}.user-assignments table input[type=checkbox]{width:20px;height:20px;cursor:pointer;accent-color:#667eea;transition:transform .2s ease}.user-assignments table input[type=checkbox]:hover{transform:scale(1.1)}.homebrew{display:flex;flex-direction:column;gap:2rem;padding:2rem;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);min-height:100vh}.homebrew.loading{display:flex;justify-content:center;align-items:center;font-size:1.2rem;color:#666}.homebrew>.content{display:flex;flex-direction:column;gap:2rem}.homebrew>.content .user-assignments{flex:1}.homebrew>.content .vps-performance{flex:1}.homebrew>.content .vps-management{flex:1}.homebrew .applications>.title,.homebrew .user-assignments>.title,.homebrew .vps-performance>.title,.homebrew .vps-management>.title{font-size:24px;font-weight:700;color:#2c3e50;margin-bottom:1.5rem;letter-spacing:.5px}.user-profile{position:fixed;top:5px;right:5px;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:16px;box-shadow:0 8px 32px #00000014;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);z-index:1000;overflow:hidden;width:60px;height:60px;transform-origin:top right}.user-profile:hover{width:260px;height:110px;background:#fffffffa;box-shadow:0 16px 48px #0000001f}.user-profile:hover .user-profile__avatar{top:12px;right:12px}.user-profile:hover .user-profile__info{opacity:1;transform:translate(0);transition-delay:.1s}.user-profile:hover .user-profile__logout{opacity:1;transform:translateY(0);pointer-events:auto;transition-delay:.2s}.user-profile__avatar{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:600;font-size:14px;box-shadow:0 2px 8px #0000001a;transition:all .4s cubic-bezier(.4,0,.2,1)}.user-profile__avatar img{width:100%;height:100%;object-fit:cover}.user-profile__avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:inherit;color:#fff;font-weight:600;font-size:14px}.user-profile__info{position:absolute;top:16px;left:16px;opacity:0;transform:translate(-20px);transition:all .2s cubic-bezier(.4,0,.2,1)}.user-profile__name{font-size:15px;font-weight:600;color:#1a1a1a;white-space:nowrap;line-height:1.3;margin-bottom:2px}.user-profile__email{font-size:13px;color:#6b7280;font-weight:400;white-space:nowrap;line-height:1.3}.user-profile__logout{position:absolute;bottom:16px;left:16px;right:16px;opacity:0;transform:translateY(20px);transition:all .2s cubic-bezier(.4,0,.2,1);pointer-events:none}.user-profile__logout-btn{background:linear-gradient(135deg,#ff6b6b,#ee5a52);color:#fff;border:none;padding:8px 16px;border-radius:10px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap;display:flex;align-items:center;gap:6px;width:100%;justify-content:center}.user-profile__logout-btn:hover{background:linear-gradient(135deg,#ff5252,#d32f2f);transform:translateY(-1px);box-shadow:0 4px 12px #ff6b6b4d}.user-profile__logout-btn:active{transform:translateY(0)}.user-profile__logout-btn svg{width:14px;height:14px}@media (max-width: 768px){.user-profile{top:16px;right:16px}.user-profile:hover{width:220px}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-family:sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#b0b1b9;background-color:#ebebeb;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{padding:0;margin:0}