*{box-sizing:border-box;margin:0;padding:0}:root{--primary:#a855f7;--secondary:#06b6d4;--accent:#f59e0b;--dark:#0f172a;--darker:#1b0037;--light:#f8fafc}body{background:linear-gradient(135deg,var(--darker) 0,var(--dark) 100%);color:var(--light);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;min-height:100vh;overflow-x:hidden}body:before{animation:gradient-shift 15s ease infinite;background:radial-gradient(circle at 20% 50%,rgba(168,85,247,.1) 0,transparent 50%),radial-gradient(circle at 80% 50%,rgba(6,182,212,.1) 0,transparent 50%);content:"";height:100%;left:0;pointer-events:none;position:fixed;top:0;width:100%}@keyframes gradient-shift{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}body:after{background-image:linear-gradient(rgba(168,85,247,.1) 1px,transparent 0),linear-gradient(90deg,rgba(168,85,247,.1) 1px,transparent 0);background-size:50px 50px;bottom:0;content:"";height:300px;left:0;opacity:.3;pointer-events:none;position:fixed;width:100%}.container{margin:0 auto;max-width:1200px;padding:2rem;position:relative;z-index:1}header{animation:fadeInDown .8s ease-out;margin-bottom:4rem;text-align:center}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}h1{background:linear-gradient(135deg,var(--primary) 0,var(--secondary) 100%);-webkit-background-clip:text;font-size:3.5rem;font-weight:800;-webkit-text-fill-color:transparent;display:inline-block;letter-spacing:-.02em;margin-bottom:.5rem;position:relative}h1:after{animation:expand 1s ease-out;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:2px;bottom:-10px;content:"";height:4px;left:50%;position:absolute;transform:translateX(-50%);width:100px}@keyframes expand{0%{width:0}to{width:100px}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}nav{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin:3rem 0}.user-info,nav #navLogout,nav a{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.1);border-radius:12px;color:var(--light);font-size:.95rem;font-weight:500;overflow:hidden;padding:.75rem 1.5rem;position:relative;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1)}nav a:before{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.1),transparent);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s;width:100%}nav a:hover:before{left:100%}nav a:hover{background:rgba(168,85,247,.2);box-shadow:0 10px 25px -5px rgba(168,85,247,.3);transform:translateY(-2px)}.user-info,nav a:hover{border-color:var(--primary)}.user-info{background:rgba(168,85,247,.15)}nav #navLogout:hover{background:rgba(239,68,68,.2);border-color:#ef4444}.card{animation:fadeInUp .8s ease-out;backdrop-filter:blur(20px);background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.1);border-radius:20px;box-shadow:0 20px 60px -15px rgba(0,0,0,.3);padding:2rem;transition:all .4s cubic-bezier(.4,0,.2,1)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.card:hover{border-color:rgba(168,85,247,.3);box-shadow:0 30px 80px -20px rgba(168,85,247,.4);transform:translateY(-5px)}.btn{background:linear-gradient(135deg,var(--primary) 0,var(--secondary) 100%);border:none;border-radius:12px;box-shadow:0 10px 30px -10px rgba(168,85,247,.5);color:#fff;cursor:pointer;display:inline-block;font-size:.9rem;font-weight:600;letter-spacing:.05em;overflow:hidden;padding:1rem 2.5rem;position:relative;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn:before{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2),transparent);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s;width:100%}.btn:hover:before{left:100%}.btn:hover{box-shadow:0 20px 40px -10px rgba(168,85,247,.6);transform:translateY(-2px)}.btn:active{transform:translateY(0)}input,select{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.1);border-radius:10px;color:var(--light);font-size:1rem;margin:.5rem 0;padding:1rem;transition:all .3s;width:100%}input:focus,select:focus{background:hsla(0,0%,100%,.08);border-color:var(--primary);box-shadow:0 0 0 3px rgba(168,85,247,.1);outline:none}input::placeholder{color:rgba(248,250,252,.4)}label{color:var(--light);display:block;font-size:.9rem;font-weight:500;margin-top:1rem}.toast-container{display:flex;flex-direction:column;gap:10px;position:fixed;right:20px;top:20px;z-index:9999}.toast{align-items:center;animation:slideIn .4s cubic-bezier(.68,-.55,.265,1.55);backdrop-filter:blur(20px);background:rgba(15,23,42,.95);border-left:4px solid;border-radius:12px;box-shadow:0 20px 40px -10px rgba(0,0,0,.5);display:flex;gap:1rem;min-width:320px;padding:1rem 1.5rem}.toast.success{border-color:#10b981}.toast.error{border-color:#ef4444}.toast.info{border-color:#06b6d4}.toast-icon{font-size:1.5rem}.toast-content{color:var(--light);flex:1;font-size:.95rem}.toast-close{background:none;border:none;color:var(--light);cursor:pointer;font-size:1.5rem;opacity:.6;padding:0;transition:opacity .2s}.toast-close:hover{opacity:1}@keyframes slideIn{0%{opacity:0;transform:translateX(400px)}to{opacity:1;transform:translateX(0)}}.toast.hiding{animation:slideOut .3s ease forwards}@keyframes slideOut{to{opacity:0;transform:translateX(400px)}}.modal-overlay{align-items:center;animation:fadeIn .3s ease;backdrop-filter:blur(10px);background:rgba(0,0,0,.8);display:none;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:10000}.modal-overlay.active{display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{animation:slideUp .4s cubic-bezier(.68,-.55,.265,1.55);backdrop-filter:blur(30px);background:linear-gradient(135deg,rgba(15,23,42,.98),rgba(26,26,62,.98));border:1px solid rgba(168,85,247,.3);border-radius:24px;box-shadow:0 30px 80px -20px rgba(168,85,247,.5);max-width:500px;padding:2.5rem;position:relative;width:90%}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.modal-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:2rem}.modal-title{background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;font-size:1.8rem;font-weight:700;-webkit-text-fill-color:transparent}.modal-close{align-items:center;background:none;border:none;border-radius:50%;color:var(--light);cursor:pointer;display:flex;font-size:2rem;height:40px;justify-content:center;opacity:.6;padding:0;transition:all .3s;width:40px}.modal-close:hover{background:rgba(168,85,247,.2);opacity:1;transform:rotate(90deg)}.profile-info-grid{display:grid;gap:1rem;margin-bottom:2rem}.profile-info-item{align-items:center;background:rgba(168,85,247,.05);border:1px solid rgba(168,85,247,.2);border-radius:12px;display:flex;justify-content:space-between;padding:1rem}.profile-info-label{color:#94a3b8;font-size:.85rem}.profile-info-value{color:var(--light);font-weight:600}.form-group-modal{margin-bottom:1.5rem}.form-group-modal label{color:#94a3b8;display:block;font-size:.9rem;margin-bottom:.5rem}.input-with-icon{position:relative}.input-with-icon input{padding-left:3rem}.input-icon{filter:none;font-size:1.2rem;left:1rem;position:absolute;top:50%;transform:translateY(-50%);z-index:10;-webkit-text-fill-color:initial}.hint-text{color:#64748b;font-size:.8rem;margin-top:.5rem}.btn-group{display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-top:2rem}.btn-secondary{background:rgba(168,85,247,.15);border:1px solid rgba(168,85,247,.3)}.user-info-clickable{cursor:pointer;position:relative}.user-info-clickable:after{content:"⚙️";margin-left:.5rem;opacity:.6;transition:opacity .3s}.user-info-clickable:hover:after{opacity:1}@media (max-width:768px){h1{font-size:2.5rem}h2{font-size:1.6rem!important}h3{font-size:1.2rem!important}h4{font-size:1rem!important}nav{gap:.5rem}.user-info,nav a{font-size:.85rem;padding:.6rem 1.2rem}.card{padding:1.5rem}.toast{min-width:280px}.modal{margin:1rem;max-height:90vh;overflow-y:auto;padding:1.5rem;width:95%}.modal-overlay{overflow-y:auto;padding:1rem}.btn-group{grid-template-columns:1fr}.container{padding:1rem}.btn{font-size:.85rem;padding:.85rem 1.8rem}.modal-title{font-size:1.4rem!important}.profile-info-grid{gap:.75rem}.profile-info-item{font-size:.9rem;padding:.75rem}#modalBadgeImage{height:80px!important;width:80px!important}.form-group-modal{margin-bottom:1rem}.hint-text{font-size:.75rem}}