@import"https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,700;1,9..144,900&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap";.auth-container{--paper: #f2ece0;--paper-warm: #ece4d3;--paper-deep: #e2d8c2;--ink: #15110d;--ink-soft: #2a2520;--ink-muted: #6b6357;--ink-faint: #a39987;--rule: #15110d;--rule-soft: rgba(21, 17, 13, .18);--red: #c92a2a;--red-deep: #8e1b1b;--pitch: #0e5a2b;--gold: #8b6914;--font-display: "Fraunces", "Times New Roman", Georgia, serif;--font-body: "Inter Tight", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;--font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem 1.5rem;background:var(--paper);color:var(--ink);font-family:var(--font-body);position:relative;overflow-y:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;animation:fadeIn .5s ease-out}.auth-container:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.28;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.07 0 0 0 0 0.05 0 0 0 0.15 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}.auth-container:after{display:none}.no-webp .auth-container{background-image:none}.auth-container ::selection{background:var(--ink);color:var(--paper)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.auth-card{position:relative;z-index:2;width:100%;max-width:440px;background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-radius:0;padding:2rem 2rem 1.75rem;box-shadow:10px 10px 0 0 var(--ink);animation:edCardIn .6s cubic-bezier(.16,1,.3,1);overflow:visible}@keyframes edCardIn{0%{opacity:0;transform:translate(8px,8px)}to{opacity:1;transform:translate(0)}}.auth-card:before{content:"FOOTLY — PREDICTIONS";position:absolute;top:-11px;left:1.25rem;padding:0 .55rem;background:var(--paper);border:1px solid var(--ink);font-family:var(--font-mono);font-size:.65rem;letter-spacing:.22em;font-weight:700;color:var(--ink);line-height:1.7}.auth-card:after{content:"EST. 2026  ·  LONDON";display:block;margin-top:1.25rem;padding-top:.75rem;border-top:1px solid var(--rule-soft);font-family:var(--font-mono);font-size:.62rem;letter-spacing:.28em;color:var(--ink-muted);text-align:center;font-weight:500}.auth-header{text-align:left;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--ink);animation:edFadeUp .7s cubic-bezier(.16,1,.3,1) .1s backwards}@keyframes edFadeUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.auth-header h2{font-family:var(--font-display);font-weight:900;font-size:clamp(1.85rem,4vw,2.35rem);line-height:.98;letter-spacing:-.035em;margin:0 0 .5rem;color:var(--ink);background:none;-webkit-background-clip:initial;-webkit-text-fill-color:initial;background-clip:initial;animation:none;font-variation-settings:"opsz" 144;font-style:italic}.auth-header p{font-family:var(--font-body);font-size:.92rem;color:var(--ink-muted);margin:0;line-height:1.45}.auth-logo{filter:none}.auth-method-toggle{display:flex;gap:0;margin-bottom:1.25rem;background:transparent;border:1px solid var(--ink);border-radius:0;padding:0;animation:edFadeUp .7s cubic-bezier(.16,1,.3,1) .15s backwards}.method-button{flex:1;padding:.65rem .75rem;background:transparent;border:none;border-radius:0;color:var(--ink-muted);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;cursor:pointer;transition:background .15s ease,color .15s ease;display:flex;align-items:center;justify-content:center;gap:.45rem}.method-button+.method-button{border-left:1px solid var(--ink)}.method-button:hover:not(.active){background:var(--paper-warm);color:var(--ink)}.method-button.active{background:var(--ink);color:var(--paper);box-shadow:none}.auth-form{margin-bottom:0;animation:edFadeUp .7s cubic-bezier(.16,1,.3,1) .2s backwards}.form-content-wrapper{animation:formSlideIn .3s cubic-bezier(.16,1,.3,1)}@keyframes formSlideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.4rem;color:var(--ink);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700}.form-group input{width:100%;padding:.7rem .85rem;background:var(--paper);border:1px solid var(--ink);border-radius:0;color:var(--ink);font-family:var(--font-body);font-size:1rem;font-weight:500;transition:box-shadow .15s ease,background .15s ease,transform .15s ease;box-shadow:3px 3px 0 0 var(--ink)}.form-group input:focus{outline:none;border-color:var(--ink);background:#fff8ea;box-shadow:5px 5px 0 0 var(--red);transform:translate(-2px,-2px)}.form-group input::placeholder{color:var(--ink-faint);font-weight:400}.input-with-help{display:flex;align-items:stretch;gap:.4rem}.input-with-help>input{flex:1}.username-help-wrapper{position:relative;display:flex;align-items:center}.username-help-btn{background:var(--paper);border:1px solid var(--ink);padding:0 .65rem;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:background .15s ease;box-shadow:3px 3px 0 0 var(--ink);min-height:42px}.username-help-btn:hover{background:var(--ink);color:var(--paper)}.username-help-tooltip{position:absolute;right:0;top:calc(100% + .5rem);background:var(--ink);border:1px solid var(--ink);border-radius:0;padding:.75rem .9rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.02em;color:var(--paper);animation:fadeIn .2s ease;z-index:100;min-width:220px;box-shadow:4px 4px 0 0 var(--red);line-height:1.5}.username-help-tooltip ul{margin:0;padding-left:1rem;list-style-type:square}.username-help-tooltip li{margin-bottom:.25rem}.username-help-tooltip li:last-child{margin-bottom:0}.input-with-icon{position:relative;display:flex;align-items:center}.input-with-icon .input-icon{position:absolute;left:.75rem;color:var(--ink-muted);pointer-events:none;z-index:1}.input-with-icon input{padding-left:2.5rem}.field-error{display:block;color:var(--red-deep);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;margin-top:.45rem;font-weight:600}.input-error{border-color:var(--red)!important;box-shadow:3px 3px 0 0 var(--red)!important}.input-error:focus{box-shadow:5px 5px 0 0 var(--red)!important}.error-message{background:var(--paper-warm);border:1px solid var(--red);border-left:4px solid var(--red);color:var(--ink);padding:.7rem .85rem;border-radius:0;margin-bottom:1rem;font-size:.88rem;font-family:var(--font-body);line-height:1.45}.auth-button{width:100%;padding:.9rem 1rem;background:var(--ink);border:1px solid var(--ink);border-radius:0;color:var(--paper);font-family:var(--font-mono);font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease;position:relative;overflow:hidden;box-shadow:5px 5px 0 0 var(--ink);margin-top:.5rem}.auth-button:before{display:none}.auth-button:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:7px 7px 0 0 var(--red);background:var(--ink);color:var(--paper)}.auth-button:active:not(:disabled){transform:translate(1px,1px);box-shadow:2px 2px 0 0 var(--red)}.auth-button:disabled{opacity:.5;cursor:not-allowed;box-shadow:3px 3px 0 0 var(--ink)}.resend-button{width:auto;padding:.55rem .9rem;margin:.75rem auto 0;background:var(--paper);border:1px solid var(--ink);border-radius:0;color:var(--ink);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;cursor:pointer;transition:background .15s ease,box-shadow .15s ease,transform .15s ease,color .15s ease;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;box-shadow:3px 3px 0 0 var(--ink)}.resend-button:hover:not(:disabled){background:var(--ink);color:var(--paper);transform:translate(-2px,-2px);box-shadow:5px 5px 0 0 var(--red)}.resend-button:disabled{opacity:.55;cursor:not-allowed}.success-content{text-align:center;padding:.75rem 0 .25rem}.success-icon{font-size:2.5rem;margin-bottom:.75rem;color:var(--pitch);display:flex;justify-content:center;align-items:center}.success-content p{color:var(--ink-soft);margin:0 0 .9rem;line-height:1.5;font-family:var(--font-body);font-size:.95rem}.auth-divider{display:flex;align-items:center;margin:1.25rem 0;text-align:center;animation:edFadeUp .7s cubic-bezier(.16,1,.3,1) .3s backwards}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:var(--ink)}.auth-divider span{padding:0 .85rem;color:var(--ink-muted);font-family:var(--font-mono);font-size:.65rem;letter-spacing:.28em;text-transform:uppercase;font-weight:700}.google-signin-button,.facebook-signin-button{width:100%;padding:.75rem .9rem;margin-bottom:.65rem;background:var(--paper);border:1px solid var(--ink);border-radius:0;color:var(--ink);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease;display:flex;align-items:center;justify-content:center;gap:.65rem;position:relative;overflow:hidden;box-shadow:4px 4px 0 0 var(--ink)}.google-signin-button{animation:edFadeUp .7s cubic-bezier(.16,1,.3,1) .4s backwards}.facebook-signin-button{animation:edFadeUp .7s cubic-bezier(.16,1,.3,1) .5s backwards}.google-signin-button:hover:not(:disabled),.facebook-signin-button:hover:not(:disabled){background:var(--paper-warm);transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--red)}.google-signin-button:active:not(:disabled),.facebook-signin-button:active:not(:disabled){transform:translate(1px,1px);box-shadow:2px 2px 0 0 var(--red)}.google-signin-button:disabled,.facebook-signin-button:disabled{opacity:.55;cursor:not-allowed}.google-signin-button svg,.facebook-signin-button svg{flex-shrink:0}.auth-footer{text-align:center;padding-top:1rem;margin-top:.25rem;border-top:1px solid var(--rule-soft);animation:edFadeUp .7s cubic-bezier(.16,1,.3,1) .5s backwards}.auth-footer p{color:var(--ink-muted);font-size:.9rem;margin:0;font-family:var(--font-body)}.auth-switch{background:none;border:none;color:var(--red);font-family:var(--font-body);font-weight:700;cursor:pointer;margin-left:.35rem;padding:0;transition:color .15s ease;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}.auth-switch:hover{color:var(--red-deep);transform:none;text-decoration:underline}.forgot-password-link{background:none;border:none;color:var(--ink);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;cursor:pointer;transition:color .15s ease;padding:.5rem .75rem;border-radius:0;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}.forgot-password-link:hover{color:var(--red);background:transparent;text-decoration:underline}.back-button{width:auto;padding:.55rem .9rem;background:var(--paper);border:1px solid var(--ink);border-radius:0;color:var(--ink);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;cursor:pointer;transition:background .15s ease,transform .15s ease,box-shadow .15s ease,color .15s ease;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;box-shadow:3px 3px 0 0 var(--ink)}.back-button:hover{background:var(--ink);color:var(--paper);transform:translate(-2px,-2px);box-shadow:5px 5px 0 0 var(--red)}.password-input-container{position:relative}.password-toggle{position:absolute;right:.7rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--ink-muted);cursor:pointer;padding:.3rem;display:flex;align-items:center;justify-content:center;transition:color .15s ease;z-index:1}.password-toggle:hover{color:var(--ink)}.password-toggle:focus{outline:none;color:var(--red)}.loading-spinner{width:38px;height:38px;border:3px solid var(--paper-warm);border-top:3px solid var(--ink);border-radius:50%;animation:spin .9s linear infinite;margin:0 auto}@keyframes slideDown{0%{opacity:0;transform:translate(-50%,-20px)}to{opacity:1;transform:translate(-50%)}}@keyframes slideUp{0%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-20px)}}.demo-info{margin-top:1.25rem;padding:.9rem;background:var(--paper-warm);border:1px solid var(--ink);border-radius:0;text-align:center}.demo-info p{color:var(--ink-muted);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.4rem}.demo-info code{color:var(--red);font-family:var(--font-mono);font-size:.85rem;background:var(--paper);padding:.2rem .45rem;border-radius:0}@media(max-width:768px){.auth-container{padding:1.5rem 1rem;justify-content:center}.auth-card{max-width:100%;padding:1.75rem 1.5rem 1.5rem;margin:0;border-radius:0;box-shadow:8px 8px 0 0 var(--ink)}.auth-header h2{font-size:clamp(1.65rem,7vw,2rem)}.auth-header p{font-size:.88rem}.form-group input{padding:.85rem .9rem;font-size:16px;border-radius:0}.auth-button{padding:.95rem 1rem;font-size:.85rem;border-radius:0;min-height:50px}.password-toggle{padding:.5rem;min-width:44px;min-height:44px}.resend-button,.back-button{padding:.7rem 1.1rem;min-height:44px}.forgot-password-link{padding:.7rem .85rem;min-height:44px;display:inline-flex;align-items:center;justify-content:center}.auth-method-toggle{margin-bottom:1rem}.method-button{padding:.85rem .75rem;min-height:46px}}@media(max-width:768px){.username-help-tooltip{right:0;left:auto;min-width:200px;max-width:240px}}@media(max-width:480px){.auth-card{padding:1.5rem 1.25rem 1.25rem;margin:.5rem;max-width:calc(100vw - 1rem);box-shadow:6px 6px 0 0 var(--ink)}.auth-card:before{left:.75rem;font-size:.58rem;letter-spacing:.18em}.auth-card:after{font-size:.55rem;letter-spacing:.22em}.auth-header{margin-bottom:1.25rem;padding-bottom:.85rem}.auth-header h2{font-size:clamp(1.5rem,7.5vw,1.85rem)}.form-input,.form-group input{font-size:16px;min-height:48px}.auth-button,.method-button{min-height:48px;font-size:.8rem}.form-group{margin-bottom:.85rem}.auth-footer{padding-top:.85rem}}@media(hover:none)and (pointer:coarse){.auth-button:hover{transform:none;box-shadow:5px 5px 0 0 var(--ink)}.auth-button:active{transform:translate(1px,1px);box-shadow:2px 2px 0 0 var(--red)}.google-signin-button:hover,.facebook-signin-button:hover,.resend-button:hover,.back-button:hover,.auth-switch:hover,.forgot-password-link:hover{transform:none}}@media(prefers-color-scheme:dark){.auth-card{background:var(--paper);border:1px solid var(--ink);color:var(--ink)}}.email-confirmation-container{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;padding:1rem}.email-confirmation-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:3rem 2rem;max-width:500px;width:100%;text-align:center;box-shadow:0 20px 40px #0000001a;border:1px solid var(--border-strong)}.confirmation-header{margin-bottom:2rem}.confirmation-icon{margin-bottom:1.5rem;opacity:0;animation:fadeInUp .6s ease-out .2s forwards}.confirmation-icon.loading{color:#6366f1;animation:spin 1s linear infinite,fadeInUp .6s ease-out .2s forwards}.confirmation-icon.success{color:var(--accent)}.confirmation-icon.error{color:#ef4444}.confirmation-title{font-size:2rem;font-weight:700;color:#1f2937;margin:0;opacity:0;animation:fadeInUp .6s ease-out .4s forwards}.confirmation-content{margin-bottom:2rem}.email-display{display:flex;align-items:center;justify-content:center;gap:.5rem;color:#6b7280;font-size:.9rem;margin-bottom:1.5rem;padding:.75rem 1rem;background:#6366f11a;border-radius:12px;opacity:0;animation:fadeInUp .6s ease-out .6s forwards}.confirmation-message{color:#374151;font-size:1.1rem;line-height:1.6;margin-bottom:1.5rem;opacity:0;animation:fadeInUp .6s ease-out .8s forwards}.success-actions,.info-actions,.error-actions{margin-top:1.5rem;opacity:0;animation:fadeInUp .6s ease-out 1s forwards}.welcome-text,.info-text{color:var(--accent);font-weight:600;margin-bottom:1rem}.info-text{color:var(--accent)}.error-text{color:#ef4444;font-weight:600;margin-bottom:1rem}.error-suggestions{text-align:left;color:#6b7280;font-size:.9rem;line-height:1.5;padding-left:1rem;margin:0}.error-suggestions li{margin-bottom:.5rem}.confirmation-footer{opacity:0;animation:fadeInUp .6s ease-out 1.2s forwards}.back-to-signin-button{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:.875rem 2rem;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #667eea4d}.back-to-signin-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #667eea66}.back-to-signin-button:active:not(:disabled){transform:translateY(0);box-shadow:0 4px 15px #667eea4d}.back-to-signin-button:disabled{opacity:.6;cursor:not-allowed}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:768px){.email-confirmation-card{padding:2rem 1.5rem;margin:1rem}.confirmation-title{font-size:1.5rem}.confirmation-message{font-size:1rem}.back-to-signin-button{padding:.75rem 1.5rem;font-size:.9rem}}@media(prefers-color-scheme:dark){.email-confirmation-card{background:#1f2937f2;border:1px solid rgba(75,85,99,.3)}.confirmation-title{color:#f9fafb}.confirmation-message{color:#d1d5db}.email-display{background:#6366f133;color:#9ca3af}.error-suggestions{color:#9ca3af}}