*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Century Gothic',sans-serif;color:#fff;line-height:1.6;text-align:center;background-image:url('https://res.cloudinary.com/dorsgzpeo/image/upload/f_webp/v1748804903/background_ervayj.jpg');background-attachment:fixed;background-position:center;background-repeat:no-repeat;background-size:cover}
.auth{padding:40px 20px;background:radial-gradient(circle at center,rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0) 100%);position:relative}
.auth-container{max-width:1000px;margin:0 auto;padding:20px}
.auth-container h1{font-family:'Copperplate Gothic',serif;font-size:2.5rem;margin-bottom:20px;text-shadow:0 0 8px rgba(255,255,255,0.7),0 0 15px rgba(255,255,255,0.3)}
#portals-content h1{font-size:3rem;padding:15px 30px;margin-bottom:30px;background:rgba(147,112,219,0.1);border-radius:8px;box-shadow:0 0 15px rgba(147,112,219,0.5);text-shadow:0 0 10px rgba(255,255,255,0.8),0 0 20px rgba(147,112,219,0.6);position:relative}
#portals-content h1::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:100px;height:2px;background:linear-gradient(to right,rgba(147,112,219,0),rgba(147,112,219,1),rgba(147,112,219,0))}
#auth-form{max-width:400px;margin:20px auto;padding:20px;background:rgba(255,255,255,0.1);border-radius:8px;box-shadow:0 0 15px rgba(255,255,255,0.8),0 0 40px rgba(147,112,219,0.6)}
.form-group{margin-bottom:15px;text-align:left}
.form-group label{display:block;font-size:0.875rem;color:#d3d3d3;margin-bottom:5px;text-shadow:0 0 2px rgba(255,255,255,0.5)}
.form-group input{background:transparent;border:1px solid #fff;color:#fff;padding:8px;border-radius:4px;width:100%;font-size:0.875rem;font-family:'Century Gothic',sans-serif}
.form-group input:focus{outline:none;border-color:#9370DB;box-shadow:0 0 8px rgba(147,112,219,0.6)}
#auth-message{margin-bottom:15px}
.error,.success{font-size:0.875rem;padding:8px;border-radius:4px;text-shadow:0 0 2px rgba(255,255,255,0.5)}
.error{background:rgba(255,0,0,0.3);color:#ff9999}
.success{background:rgba(0,255,0,0.3);color:#99ff99}
.auth-btn{background:#333;color:#fff;padding:8px 16px;border-radius:4px;border:none;font-family:'Copperplate Gothic',serif;font-size:0.875rem;cursor:pointer;box-shadow:0 0 8px rgba(255,255,255,0.3);transition:transform .3s ease,box-shadow .3s ease;margin:10px}
.auth-btn:hover{transform:scale(1.05);box-shadow:0 0 15px rgba(255,255,255,0.8);background:#222}
.auth-switch{margin-top:20px}
.link{color:#fff;text-decoration:underline;transition:text-shadow .3s ease}
.link:hover{text-shadow:0 0 8px rgba(255,255,255,0.8)}
.module-breakdown{display:grid;grid-template-columns:1fr;gap:20px;margin:20px 0;justify-items:center;align-items:stretch}
.module{max-width:600px;padding:20px;background:rgba(255,255,255,0.1);border-radius:8px;box-shadow:0 0 15px rgba(255,255,255,0.8),0 0 40px rgba(147,112,219,0.6);animation:portalGlow 2s infinite alternate;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center}
.module p{font-size:0.875rem;color:#d3d3d3;text-shadow:0 0 2px rgba(255,255,255,0.5);line-height:1.7;margin:10px 0}
.module p strong{font-family:'Copperplate Gothic',serif;color:#fff;font-size:1rem}
.module ul{list-style-type:none;padding:0;margin:10px 0}
.module ul li{font-size:0.875rem;color:#d3d3d3;text-shadow:0 0 2px rgba(255,255,255,0.5);line-height:1.7;margin-bottom:15px;padding:8px;background:rgba(0,0,0,0.2);border-radius:4px}
.module ul li strong{font-family:'Copperplate Gothic',serif;color:#fff}
.module ul + p{font-size:0.875rem;font-weight:bold;color:#fff;background:rgba(147,112,219,0.2);padding:8px;border-radius:4px;margin-top:15px}
.module ul + p + ul li{background:none;padding:0}
.module > p:last-of-type{font-size:1rem;color:#fff;font-weight:bold;text-shadow:0 0 4px rgba(255,255,255,0.7);margin-top:15px}
.portal-title{font-family:'Copperplate Gothic',serif;font-size:2.25rem;font-weight:bold;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid rgba(147,112,219,0.5);text-shadow:0 0 8px rgba(255,255,255,0.7);width:100%}
.large-portal-btn{background:#333;color:#fff;padding:8px 16px;border-radius:4px;border:none;font-family:'Copperplate Gothic',serif;font-size:0.875rem;cursor:pointer;box-shadow:0 0 12px rgba(255,255,255,0.7),0 0 30px rgba(147,112,219,0.5);transition:transform .3s ease,box-shadow .3s ease;margin:10px}
.large-portal-btn:hover{transform:scale(1.05);box-shadow:0 0 25px rgba(255,255,255,0.9),0 0 50px rgba(147,112,219,0.7);background:#222}
.large-portal-btn.disabled{opacity:0.5;cursor:not-allowed}
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:1000}
.modal[aria-hidden="false"]{display:block}
.modal-content{background:rgba(0,0,0,0.9);max-width:500px;margin:15% auto;padding:20px;border-radius:8px;box-shadow:0 0 15px rgba(255,255,255,0.8),0 0 40px rgba(147,112,219,0.6);text-align:center}
.modal-content:focus-within{outline:2px solid #9370DB;outline-offset:2px}
.close{position:absolute;top:10px;right:15px;color:#fff;font-size:1.5rem;cursor:pointer}
.close:focus,.btn:focus{outline:2px solid #9370DB;outline-offset:2px}
.close:hover{text-shadow:0 0 8px rgba(255,255,255,0.8)}
@keyframes portalGlow{0%{box-shadow:0 0 15px rgba(255,255,255,0.8),0 0 40px rgba(147,112,219,0.6)}100%{box-shadow:0 0 30px rgba(255,255,255,0.9),0 0 60px rgba(147,112,219,0.8)}}
@media (max-width:1024px){.auth-container{padding:15px}.modal-content{margin:20% auto}}
@media (max-width:768px){.auth{padding:20px 10px}.auth-container h1{font-size:2rem}#portals-content h1{font-size:2.5rem;padding:10px 20px;margin-bottom:20px}.module{max-width:100%;padding:15px}.portal-title{font-size:1.75rem}.large-portal-btn,.auth-btn{font-size:0.75rem;padding:6px 12px}.form-group input{font-size:0.75rem}.modal-content{margin:30% auto;padding:15px;max-width:90%}}
.loading{display:none;margin-left:8px;font-size:0.875rem;color:#d3d3d3}
.error-message{display:none;color:#ff9999;font-size:0.75rem;margin-top:5px;text-shadow:0 0 2px rgba(255,255,255,0.5)}
.error-message[aria-hidden="false"]{display:block}
input[aria-invalid="true"]{border-color:#ff9999;box-shadow:0 0 8px rgba(255,0,0,0.6)}
@media (max-width:768px){.loading{font-size:0.75rem}.error-message{font-size:0.7rem}}