:root{--bg-gradient: linear-gradient(135deg, #1e0b50 0%, #44107a 100%);--surface-glass: rgba(255, 255, 255, .1);--surface-border: rgba(255, 255, 255, .2);--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .7);--color-red: #e21b3c;--color-blue: #1368ce;--color-yellow: #d89e00;--color-green: #26890c;--font-main: "Outfit", "Inter", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background:var(--bg-gradient);color:var(--text-primary);min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}#root{display:flex;flex:1;width:100%}.app-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100vh}.header{margin-bottom:2rem;text-align:center}.header h1{font-size:4rem;font-weight:800;letter-spacing:-1px;background:linear-gradient(to right,#fff,#d89e00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0px 4px 6px rgba(0,0,0,.3))}.join-form{background:var(--surface-glass);padding:3rem;border-radius:20px;border:1px solid var(--surface-border);box-shadow:0 8px 32px #0003;display:flex;flex-direction:column;gap:1.5rem;width:100%;max-width:400px}.pin-input{width:100%;padding:1rem;font-size:2rem;font-family:var(--font-main);font-weight:800;text-align:center;letter-spacing:5px;border:none;border-radius:12px;background:#fff;color:#333;outline:none;transition:transform .2s ease,box-shadow .2s ease}.pin-input:focus{transform:scale(1.02);box-shadow:0 0 0 4px #fff6}.pin-input::placeholder{color:#aaa;font-weight:600;letter-spacing:0}.btn-join{background-color:var(--text-primary);color:#333;border:none;padding:1.2rem;font-size:1.2rem;font-weight:800;font-family:var(--font-main);border-radius:12px;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 6px #0000001a}.btn-join:hover{transform:translateY(-2px);box-shadow:0 6px 12px #0003;background-color:#f1f1f1}.btn-join:active{transform:translateY(1px)}.quiz-card{flex-wrap:wrap;gap:12px!important}@media (max-width: 768px){.header h1{font-size:2rem}.quiz-card{flex-direction:column!important;align-items:flex-start!important}}@media (max-width: 480px){.header h1{font-size:1.6rem}.btn-join{padding:.9rem;font-size:1rem}}.portal-card{transition:all .3s cubic-bezier(.4,0,.2,1)!important}.portal-card:hover{transform:translateY(-15px)!important;background:#ffffff14!important;border-color:#ffffff4d!important;box-shadow:0 20px 40px #0006!important}@media (max-width: 768px){.hub-container{height:auto!important;padding:60px 0!important}}