@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap");
#supabaseLogin{--ink:#233e37;--green:#2a695b;--muted:#738078;--paper:#f6f5ee}
#supabaseLogin *{box-sizing:border-box}
#supabaseLogin{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif}
#supabaseLogin button,#supabaseLogin a,#supabaseLogin input{-webkit-tap-highlight-color:transparent}
#supabaseLogin button{font:inherit;cursor:pointer}
#supabaseLogin header{max-width:1280px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:32px 48px}
#supabaseLogin .brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:var(--ink);font:800 28px Manrope,sans-serif;line-height:1}
#supabaseLogin .brand-sub{display:block;font:600 9px "DM Sans";letter-spacing:4px;margin-top:7px}
#supabaseLogin .preview{font-size:10px;letter-spacing:2px;color:#8b9388}
#supabaseLogin .motion{border:1px solid #d9ded2;border-radius:30px;background:transparent;color:#5d7063;padding:10px 14px;font-size:11px;display:flex;gap:7px}
#supabaseLogin .landing-main{max-width:1200px;margin:32px auto 60px;display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:56px;padding:0 32px}
#supabaseLogin .eyebrow{font-size:10px;letter-spacing:2.2px;font-weight:700;color:#5c8171;display:flex;align-items:center;gap:8px}
#supabaseLogin .eyebrow span,#supabaseLogin .live-dot{width:6px;height:6px;background:#7eaa88;border-radius:100%;display:inline-block}
#supabaseLogin h1{font-family:Manrope,sans-serif;font-size:58px;line-height:1.12;letter-spacing:-3px;margin:22px 0}
#supabaseLogin h1 em{font-style:normal;color:#659080}
#supabaseLogin p.lead{font-size:16px;color:#728075;line-height:1.8}
#supabaseLogin .intro{padding-left:40px}
#supabaseLogin .scene-wrap{position:relative;margin-top:20px}
#supabaseLogin .scene{width:100%;display:block}
#supabaseLogin .scene-label{text-align:center;font-size:10px;color:#829082;letter-spacing:.4px;margin-bottom:-10px}
#supabaseLogin .scene-label span{margin-right:5px;width:5px;height:5px}
#supabaseLogin .scene-note{text-align:center;font-size:11px;color:#869182;margin-top:-8px}
#supabaseLogin .scene-note span{color:#bda15e;padding-right:5px}
#supabaseLogin .entry{background:#fffefa;border:1px solid #e3e6da;box-shadow:0 20px 55px #3a513707;border-radius:28px;padding:43px 32px}
#supabaseLogin .entry h2{font:800 28px Manrope,sans-serif;letter-spacing:-1px;margin:16px 0 10px}
#supabaseLogin .muted{font-size:13px;color:#8a9286;line-height:1.6}
#supabaseLogin .roles{display:grid;gap:14px;margin-top:30px}
#supabaseLogin .role{display:flex;align-items:center;text-align:left;gap:16px;width:100%;border:1px solid #d7e2d5;border-radius:18px;padding:23px 18px;background:#eff4ec;color:var(--ink);transition:transform .2s,box-shadow .2s}
#supabaseLogin .role:hover{transform:translateY(-3px);box-shadow:0 7px 15px #334f3610}
#supabaseLogin .role:focus-visible,#supabaseLogin button:focus-visible{outline:3px solid #c5a653;outline-offset:4px}
#supabaseLogin .role strong{display:block;font:800 19px Manrope,sans-serif}
#supabaseLogin .role small{display:block;font-size:11px;color:#7a897b;margin-top:7px}
#supabaseLogin .role-icon{background:#dfeada;border-radius:13px;width:46px;height:49px;display:grid;place-items:center;font-size:33px;color:#4c7b5c}
#supabaseLogin .arrow{margin-left:auto;font-size:23px;color:#77907c}
#supabaseLogin .child-role{background:#fbf4e5;border-color:#eee0bd}
#supabaseLogin .child-role .role-icon{background:#f5e8c5;color:#bf9b47}
#supabaseLogin .footnote{font-size:10px;text-align:center;color:#9a9e90;margin:28px 0 0}
#supabaseLogin .back{padding:0;border:0;background:none;color:#718673;margin-bottom:30px;font-size:12px}
#supabaseLogin .entry label{display:block;font-size:12px;margin:20px 0 8px}
#supabaseLogin input{width:100%;border:1px solid #dee4d8;background:#f9faf6;border-radius:10px;padding:13px;color:#9ba392;font:inherit;font-size:13px}
#supabaseLogin .continue{width:100%;padding:14px;border:0;background:var(--green);border-radius:11px;color:white;font-weight:600;margin-top:22px}
#supabaseLogin .demo-note{font-size:11px;line-height:1.6;color:#8b907d}
#supabaseLogin .entry[hidden],#supabaseLogin [hidden]{display:none!important}
#supabaseLogin footer{max-width:1180px;margin:0 auto;padding:24px 32px 30px;border-top:1px solid #e1e5d9;display:flex;justify-content:space-between;gap:15px;color:#929c8d;font-size:10px}
#supabaseLogin footer span:first-child{letter-spacing:2px;font-weight:700}
#supabaseLogin .scene{overflow:visible}
#supabaseLogin .scene-wrap{--story-duration:7.2s}
#supabaseLogin .cloud{animation:cloud-drift 6s ease-in-out infinite alternate}
#supabaseLogin .sun-rays{transform-origin:204px 143px;animation:sun-turn 24s linear infinite}
#supabaseLogin .wave{transform-origin:370px 267px;animation:parent-wave 2.8s ease-in-out infinite}
#supabaseLogin .plant{transform-origin:577px 320px;animation:plant-sway 3.6s ease-in-out infinite}
#supabaseLogin .tail{transform-origin:479px 367px;animation:tail-swish 1.8s ease-in-out infinite}
#supabaseLogin .cat{transform-origin:459px 383px;animation:cat-stretch 5.2s ease-in-out infinite}
#supabaseLogin .cat-head{transform-origin:449px 359px;animation:cat-look 5.2s ease-in-out infinite}
#supabaseLogin .cat-paw{animation:paw-reach 5.2s ease-in-out infinite}
#supabaseLogin .child{transform-origin:225px 376px;animation:child-celebrate var(--story-duration) ease-in-out infinite}
#supabaseLogin .book-arm{transform-origin:202px 288px;animation:lift-book var(--story-duration) ease-in-out infinite}
#supabaseLogin .spark{transform-origin:343px 202px;animation:star-pop 2.4s ease-in-out infinite}
#supabaseLogin .praise-bubble{transform-origin:376px 128px;animation:praise var(--story-duration) ease-in-out infinite}
#supabaseLogin .ruby-reward{transform-origin:298px 183px;animation:earn-ruby var(--story-duration) ease-in-out infinite}
#supabaseLogin .ruby-gem{transform-origin:298px 182px;animation:gem-rock 1.6s ease-in-out infinite}
#supabaseLogin .reward-trail{animation:reward-trail var(--story-duration) ease-out infinite}
#supabaseLogin .quest-toast{transform-origin:195px 415px;animation:quest-toast var(--story-duration) ease-in-out infinite}
#supabaseLogin .confetti-piece{opacity:0;transform-box:fill-box;transform-origin:center;animation:story-confetti var(--story-duration) ease-out infinite}
#supabaseLogin .celebration.manual .confetti-piece{animation:manual-confetti 1.4s ease-out both}
#supabaseLogin .celebrate-button{display:block;margin:16px auto 0;padding:10px 17px;border:1px solid #cfddc9;border-radius:24px;background:#e9f0e2;color:#396c57;font-size:12px;font-weight:600;transition:background .2s,transform .2s}
#supabaseLogin .celebrate-button:hover{background:#dce9d3;transform:translateY(-2px)}
#supabaseLogin .celebrate-button:active{transform:scale(.96)}
#supabaseLogin .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#supabaseLogin.paused *,#supabaseLogin.offscreen .scene *{animation-play-state:paused!important}
@keyframes cloud-drift{from{transform:translateX(-17px)}to{transform:translateX(26px)}}
@keyframes sun-turn{to{transform:rotate(360deg)}}
@keyframes parent-wave{0%,100%{transform:rotate(-10deg)}18%,48%{transform:rotate(25deg)}33%,63%{transform:rotate(-19deg)}78%{transform:rotate(12deg)}}
@keyframes plant-sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}
@keyframes tail-swish{0%,100%{transform:rotate(-22deg)}50%{transform:rotate(31deg)}}
@keyframes cat-stretch{0%,55%,100%{transform:translateY(0) scale(1)}20%,35%{transform:translateY(-5px) scale(1.1,.94)}72%{transform:translateY(-9px) scale(.98,1.03)}}
@keyframes cat-look{0%,55%,100%{transform:rotate(0)}20%,35%{transform:rotate(-14deg)}72%{transform:rotate(11deg)}}
@keyframes paw-reach{0%,55%,100%{transform:translateX(0)}20%,35%{transform:translateX(-10px)}}
@keyframes child-celebrate{0%,12%,36%,46%,100%{transform:translateY(0) rotate(0)}8%{transform:translateY(-5px)}22%{transform:translateY(-24px) rotate(-3deg)}29%{transform:translateY(0) scale(1.03,.98)}40%{transform:translateY(-15px) rotate(2deg)}}
@keyframes lift-book{0%,6%,69%,100%{transform:rotate(0)}18%,27%,40%{transform:rotate(47deg)}33%,48%,57%{transform:rotate(30deg)}}
@keyframes star-pop{0%,100%{opacity:.45;transform:scale(.8) rotate(-6deg)}50%{opacity:1;transform:scale(1.22) rotate(6deg)}}
@keyframes praise{0%,8%,77%,100%{opacity:0;transform:translateY(12px) scale(.8)}16%,65%{opacity:1;transform:translateY(0) scale(1)}22%{opacity:1;transform:translateY(-4px) scale(1.06)}}
@keyframes earn-ruby{0%,14%{opacity:0;transform:translateY(47px) scale(.55)}25%{opacity:1;transform:translateY(-5px) scale(1.12)}34%,61%{opacity:1;transform:translateY(0) scale(1)}70%,100%{opacity:0;transform:translateY(-36px) scale(.85)}}
@keyframes gem-rock{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes reward-trail{0%,13%,42%,100%{opacity:0;transform:translateY(17px)}20%,30%{opacity:1;transform:translateY(-10px)}}
@keyframes quest-toast{0%,20%,84%,100%{opacity:0;transform:translateY(12px) scale(.94)}29%,74%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes story-confetti{0%,19%{opacity:0;transform:translate(0,0) rotate(0)}20%{opacity:1;transform:translate(0,0) rotate(0)}39%{opacity:1;transform:translate(var(--dx),var(--dy)) rotate(var(--turn))}49%,100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 28px)) rotate(var(--turn))}}
@keyframes manual-confetti{0%{opacity:1;transform:translate(0,0) rotate(0)}70%{opacity:1;transform:translate(var(--dx),var(--dy)) rotate(var(--turn))}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 28px)) rotate(var(--turn))}}
@media (prefers-reduced-motion:reduce){#supabaseLogin:not(.motion-enabled) *{animation:none!important;transition:none!important}
#supabaseLogin:not(.motion-enabled) .confetti-piece,#supabaseLogin:not(.motion-enabled) .reward-trail{opacity:0}}
@media (min-width:1400px){#supabaseLogin .landing-main{margin-top:60px}}
@media (max-width:760px){#supabaseLogin header{padding:22px 24px}
#supabaseLogin .preview{display:none}
#supabaseLogin .brand{font-size:24px}
#supabaseLogin .brand svg{width:31px;height:37px}
#supabaseLogin .motion{font-size:10px;padding:8px 11px}
#supabaseLogin .landing-main{display:flex;flex-direction:column;gap:24px;padding:0 23px;margin:24px auto 30px;max-width:470px}
#supabaseLogin .welcome{width:100%}
#supabaseLogin .intro{text-align:center;padding:0}
#supabaseLogin .intro .eyebrow{justify-content:center;font-size:9px}
#supabaseLogin h1{font-size:40px;letter-spacing:-2px;margin:16px 0}
#supabaseLogin .lead{font-size:13px!important;line-height:1.7!important}
#supabaseLogin .scene-wrap{margin:15px -10px 0}
#supabaseLogin .scene-label{font-size:9px}
#supabaseLogin .scene{max-height:none}
#supabaseLogin .scene-note{margin-top:2px}
#supabaseLogin .celebrate-button{margin-top:12px;font-size:11px}
#supabaseLogin .scene-note{font-size:9px}
#supabaseLogin .entry{width:100%;padding:25px 22px;border-radius:24px}
#supabaseLogin .entry h2{font-size:24px;margin-top:12px}
#supabaseLogin .entry .eyebrow{font-size:8px;letter-spacing:1.8px}
#supabaseLogin .muted{font-size:12px}
#supabaseLogin .roles{margin-top:22px;gap:12px}
#supabaseLogin .role{padding:17px 13px;gap:13px}
#supabaseLogin .role strong{font-size:17px}
#supabaseLogin .role small{font-size:10px}
#supabaseLogin .role-icon{width:40px;height:43px;font-size:28px}
#supabaseLogin .footnote{margin-top:20px;font-size:9px}
#supabaseLogin footer{margin:0 24px;padding:20px 0;flex-wrap:wrap;justify-content:center;font-size:9px}
#supabaseLogin footer span:first-child{display:none}
#supabaseLogin footer span:last-child{width:100%;text-align:center;font-size:8px}}
#supabaseLogin.paused .scene.is-celebrating .praise-bubble,#supabaseLogin.paused .scene.is-celebrating .quest-toast{animation:none!important;opacity:1;transform:none}
body.rqa-login-mode{background:#f6f5ee}
body.rqa-login-mode .shell{display:block;max-width:none;margin:0}
body.rqa-login-mode aside,body.rqa-login-mode main>header,body.rqa-login-mode main>footer{display:none!important}
body.rqa-login-mode main{padding:0;min-width:0}
body.rqa-login-mode #status{max-width:1136px;margin:0 auto;padding:0 24px;font-size:13px}
body.rqa-login-mode #status:empty{display:none}
#supabaseLogin{width:100%;max-width:none;margin:0;min-height:100vh}
#supabaseLogin header{background:none;border:0;box-shadow:none;position:static}
#supabaseLogin p{margin-top:0}
#supabaseLogin button{box-shadow:none;min-height:44px;white-space:normal;letter-spacing:normal}
#supabaseLogin .brand{padding:0}
#supabaseLogin .brand svg{width:37px;height:43px;max-width:none}
#supabaseLogin .scene{height:auto;max-width:none}
#supabaseLogin .scene-label{margin-bottom:-10px}
#supabaseLogin .entry .login-card{padding:0;border:0;box-shadow:none;background:none}
#supabaseLogin .entry h2{color:var(--ink)}
#supabaseLogin .entry p:not(.eyebrow):not(.footnote){font-size:13px;line-height:1.6;color:#738078}
#supabaseLogin .entry label{display:block;margin:14px 0 6px;font-size:14px}
#supabaseLogin .entry input:not([type=checkbox]){width:100%;min-height:48px;font-size:16px;color:#233e37;background:#f9faf6;border:1px solid #dee4d8;border-radius:10px;padding:13px}
#supabaseLogin .entry input[type=checkbox]{width:auto;min-height:0;margin-right:8px}
#supabaseLogin .entry input:focus-visible{outline:2px solid #659080;outline-offset:2px}
#supabaseLogin .entry button.primary{width:100%;margin-top:18px;min-height:48px;border:0;border-radius:11px;background:#2a695b;color:white;font-weight:600}
#supabaseLogin .entry .panel{padding:0;border:0;box-shadow:none;background:none;margin:0}
#supabaseLogin .login-back,#supabaseLogin .login-link{padding:10px 0;min-height:44px;background:none;border:0;box-shadow:none;color:#2a695b;font-size:14px;text-align:left;white-space:normal}
#supabaseLogin .login-back{margin-bottom:12px}
#supabaseLogin .login-links{border-top:1px solid #e7edef;margin-top:20px;padding-top:10px;display:flex;flex-direction:column;align-items:flex-start}
#supabaseLogin #sbError:empty{display:none}
#supabaseLogin #sbError{font-size:14px;padding:12px;background:#f1f7f6;border-radius:12px;margin:16px 0 0}
#supabaseLogin .landing-footer{background:none}
@media(max-width:760px){#supabaseLogin .brand svg{width:31px;height:37px}#supabaseLogin[data-pane]:not([data-pane="home"]) .welcome{display:none}#supabaseLogin[data-pane]:not([data-pane="home"]) .landing-main{margin-top:12px}}

/* Persistent language control, outside the authenticated/login layout. */
.rqa-language-bar{display:flex;align-items:center;justify-content:flex-end;gap:6px;position:relative;z-index:20;padding:8px max(16px,env(safe-area-inset-right));background:#f4f5ed;color:#294d45;font:12px system-ui;box-sizing:border-box;width:100%}
.rqa-language-bar>span{margin-right:6px}.rqa-language-bar button{min-height:36px;min-width:44px;padding:6px 10px;margin:0;border:1px solid #b8cbbd;border-radius:9px;background:#fffaf1;color:#294d45;font-weight:700;cursor:pointer}.rqa-language-bar button[aria-pressed=true]{background:#255e50;color:white;border-color:#255e50}

#supabaseLogin .google-signin{width:100%;min-height:48px;padding:12px 20px;border:1px solid #747775;border-radius:8px;background:#fff;color:#1f1f1f;font:500 16px Arial,sans-serif;margin:12px 0 0}
#supabaseLogin .google-signin:hover{background:#f2f5f3}
#supabaseLogin .google-signin:disabled{opacity:.6;cursor:wait}
#supabaseLogin .google-separator{text-align:center;font-size:13px;color:#738078;margin:16px 0}