/* Approved friendly login. Scoped so authenticated views retain their theme. */
body.login-page { background:#edf6ff; color:#071442; }
body.login-page .liquid-bg-container { display:none; }
body.login-page #app { display:block; min-height:100svh; }
body.login-page #app-main { padding:0 !important; margin:0 !important; width:100% !important; max-width:none !important; overflow:visible !important; }
.login-shell { --text-primary:#071442; --text-secondary:#344367; --text-muted:#657392; --error:#bd2547; min-height:100svh; padding:32px clamp(24px,3.4vw,64px) 18px; position:relative; isolation:isolate; overflow:hidden; background:radial-gradient(ellipse at 0 100%,#d8eaff 0,transparent 40%),radial-gradient(ellipse at 100% 0,#d9f3f0 0,transparent 27%),#edf6ff; font-family:"Sukhumvit Set","Plus Jakarta Sans",system-ui,sans-serif; }
.login-shell::before,.login-shell::after { content:"";position:absolute;z-index:-1;width:190px;height:190px;border-radius:40%;border:1px dashed #76cfc9;opacity:.32;pointer-events:none; }
.login-shell::before {top:-90px;right:-60px;transform:rotate(20deg)}
.login-shell::after {bottom:-120px;left:-50px;transform:rotate(-20deg)}
.login-brand {position:relative;z-index:8;display:flex;flex-direction:column;align-items:center;width:max-content;color:#071442;line-height:1;}
.login-brand-logo {display:block;width:clamp(180px,18vw,265px);height:auto;object-fit:contain;}
.login-brand-subtitle {display:block;margin-top:2px;color:#1f3160;font-size:clamp(10px,1vw,14px);font-weight:850;letter-spacing:.16em;line-height:1;white-space:nowrap;}
.login-layout {max-width:1480px;margin:30px auto 0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(360px,1fr);gap:38px;align-items:center;min-height:calc(100svh - 140px);}
.login-hero {min-width:0;position:relative;align-self:center;}
.login-intro {position:relative;z-index:8;}
.login-intro h1 {font-size:clamp(36px,4.35vw,65px);font-weight:850;letter-spacing:-1.8px;line-height:1.27;margin:0 0 16px;color:#071442;}
.login-intro p {font-size:clamp(18px,1.9vw,27px);font-weight:700;color:#15234e;margin:0;display:inline-block;position:relative;}
.login-intro p::after {content:"";position:absolute;left:0;right:0;bottom:-9px;height:6px;border-top:3px solid #f28b61;border-radius:50%;transform:rotate(-1deg)}
.login-art {height:420px;position:relative;margin-top:18px;}
.login-illustration {position:absolute;right:-20px;bottom:-10px;width:100%;height:auto;max-height:480px;object-fit:contain;object-position:bottom;z-index:1;pointer-events:none;animation:login-float 7s ease-in-out infinite;}
.login-orbit {position:absolute;width:100%;height:100%;inset:0;z-index:1;pointer-events:none;}
.login-bubble {position:absolute;right:36%;top:1%;background:#ffbdb2;color:#17254a;border-radius:48% 52% 48% 12%;padding:14px 20px;font-size:19px;line-height:1.15;font-weight:750;font-style:italic;transform:rotate(-8deg);z-index:3;}
.login-spark {position:absolute;font-size:42px;color:#63bfc1;z-index:3;}
.login-spark-one {left:-8px;top:16%;animation:login-sparkle 5s ease-in-out infinite;}
.login-spark-two {right:8%;top:8%;color:#ffa24a;animation:login-sparkle 5s 1s ease-in-out infinite;}
.login-chart {position:absolute;z-index:2;background:rgba(255,255,255,.96);border:1px solid #fff;border-radius:17px;padding:12px 15px;box-shadow:0 7px 15px #325e9820;color:#0d204c;pointer-events:none;}
.login-chart strong {display:block;font-size:12px;line-height:1.45;margin:2px 0 8px;}
.login-rings {left:0;top:8%;width:39%;animation:login-float 6s ease-in-out infinite;}
.login-ring-row {display:flex;gap:8px;align-items:center;}
.login-ring-item {flex:1;min-width:0;text-align:center;font-size:9px;font-weight:750;}
.login-ring-item svg {display:block;width:100%;max-height:74px;margin:0 auto 4px;}
.login-ring-item:nth-child(2) svg {transform:scale(1.07);}
.login-ring-track,.login-ring-fill {fill:none;stroke-width:7;}
.login-ring-track {stroke:#e5e7ed;}
.login-ring-fill {stroke-linecap:round;transform:rotate(-90deg);transform-origin:40px 40px;}
.login-parts {left:41%;top:28%;width:31%;z-index:0;}
.login-part-row {display:flex;align-items:center;gap:10px;margin:7px 0;font-size:9px;font-weight:650;}
.login-part-row>span {width:35px;flex-shrink:0;}
.login-part-row>div {flex:1;height:7px;background:#e9ebef;border-radius:20px;overflow:hidden;}
.login-part-row i {display:block;width:var(--part-width);background:var(--part-color);height:100%;border-radius:20px;}
.login-trend {left:3%;top:46%;width:30%;}
.login-trend svg {width:100%;display:block;}
.login-card.auth-container {width:100%;max-width:490px;justify-self:end;padding:44px 38px 42px;border-radius:27px;border:1px solid #ffffff;background:rgba(255,255,255,.98);box-shadow:0 12px 30px #4577af20;backdrop-filter:none;color:#071442;animation:login-enter .5s ease-out both;}
.login-card-heading {text-align:center;margin-bottom:34px;}
.login-wave {display:block;width:51px;height:51px;color:#fc827c;margin:0 auto 18px;transform-origin:50% 85%;animation:login-wave 1.1s .25s ease-in-out 1;}
.login-card h2 {font-size:clamp(30px,3vw,42px);color:#071442;font-weight:850;line-height:1.3;margin:0;letter-spacing:-.8px;}
.login-card #auth-form {gap:24px !important;}
.login-card .form-group {gap:9px;}
.login-card .form-group label {display:block;font-size:16px;line-height:1.5;color:#15234e;font-weight:650;margin-bottom:8px;}
body.login-page .login-card .form-control {width:100%;height:53px;background:#fff;color:#15234e;-webkit-text-fill-color:#15234e;caret-color:#155bff;border:1.5px solid #cbd1dc;border-radius:9px;padding:12px 14px;font:inherit;font-size:16px;box-shadow:none;transition:border-color .16s,box-shadow .16s;}
body.login-page .login-card .form-control:focus {border-color:#155bff;outline:none;box-shadow:0 0 0 4px #155bff14;}
body.login-page .login-card .form-control:-webkit-autofill {box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:#15234e;}
body.login-page .login-card .auth-password-field input {padding-right:55px;}
.login-card .auth-password-toggle {color:#687285;}
body.login-page .login-card #auth-submit-btn {height:56px !important;border:0;border-radius:9px;background:#1057f5;color:white;font-size:19px;font-weight:750;box-shadow:0 5px 13px #155bff1c;transition:transform .18s,box-shadow .18s,background .18s;}
body.login-page .login-card #auth-submit-btn:hover:not(:disabled) {background:#0648d9;transform:translateY(-2px);box-shadow:0 8px 17px #155bff30;}
body.login-page .login-card #auth-submit-btn:active:not(:disabled) {transform:translateY(0);}
.login-card #auth-submit-btn:disabled {opacity:.65;cursor:wait;}
.login-card :is(button,[role=tab]):focus-visible {outline:3px solid #155bff;outline-offset:4px;}
.login-card .auth-tabs {border:1px solid #e3e8f2;background:#f3f7ff;}
.login-card .auth-tab {color:#526287;}
.login-card .auth-tab.active {background:white;color:#104ad1;}
.login-card .auth-tabs {display:none !important;}
.login-mode-link-wrap {margin:0;text-align:center;color:#657392;font-size:13px;line-height:1.5;}
.login-mode-link {border:0;background:transparent;color:#1057f5;font:inherit;font-weight:750;padding:2px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.login-mode-link:hover {color:#0648d9;}
.login-card .redeem-login-notice {color:#203254;background:#eff6ff;border-color:#cbdcff;}
.login-footer {display:flex;flex-direction:column;align-items:center;gap:2px;color:#233254;text-align:center;margin:22px 0 0;}
.login-footer-logo {display:block;width:104px;height:auto;opacity:.76;object-fit:contain;}
.login-footer-subtitle {font-size:8px;font-weight:800;letter-spacing:.14em;line-height:1;color:#526287;}
@keyframes login-float {0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes login-sparkle {0%,100%{opacity:.6;transform:rotate(-8deg)}50%{opacity:1;transform:rotate(8deg)}}
@keyframes login-wave {0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}70%{transform:rotate(10deg)}}
@keyframes login-enter {from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1500px) {.login-layout{gap:60px}.login-art{height:480px}.login-illustration{max-height:540px}}
@media(max-width:1050px) and (min-width:701px) {.login-layout{gap:22px;grid-template-columns:minmax(0,1.25fr) minmax(310px,1fr)}.login-card.auth-container{padding:32px 25px}.login-art{height:335px}.login-parts{left:35%;width:35%;top:27%}.login-chart{padding:9px}.login-intro h1{font-size:36px}.login-bubble{font-size:15px}.login-trend{width:35%}.login-ring-item{font-size:8px}}
@media(max-width:700px) {
 .login-shell{padding:23px 20px 22px;}
 .login-brand-logo{width:170px;}
 .login-brand-subtitle{font-size:9px;}
 .login-layout{display:flex;flex-direction:column;gap:0;margin:34px auto 0;min-height:0;max-width:460px;}
 .login-hero{width:100%;}
 .login-intro{width:76%;}
 .login-intro h1{font-size:clamp(27px,7.8vw,38px);line-height:1.3;letter-spacing:-1px;margin-bottom:12px;}
 .login-intro p{font-size:15px;}
 .login-art{height:235px;margin-top:-35px;}
 .login-illustration{width:100%;right:-8px;bottom:0;max-height:280px;object-fit:contain;object-position:bottom;}
 .login-chart{display:none;}
 .login-spark-one{font-size:30px;left:5px;top:40%;}
 .login-spark-two{right:0;top:28%;font-size:27px;}
 .login-card.auth-container{max-width:none;padding:25px 23px 27px;border-radius:23px;margin-top:8px;}
 .login-card-heading{margin-bottom:24px;}
 .login-wave{width:37px;height:37px;margin-bottom:12px;}
 .login-card h2{font-size:30px;}
 .login-card #auth-form{gap:18px !important;}
 .login-card .form-group label{font-size:15px;margin-bottom:7px;}
 body.login-page .login-card .form-control{height:49px;}
 body.login-page .login-card #auth-submit-btn{height:51px !important;font-size:18px;}
 .login-footer{margin-top:26px;font-size:10px;}
}
@media(max-width:370px){.login-shell{padding-inline:15px}.login-brand{font-size:18px}.login-intro h1{font-size:26px}.login-intro p{font-size:13px}.login-rings{width:108px;right:-8px;top:-57px}.login-art{height:210px}.login-card.auth-container{padding:24px 20px}}
@media(prefers-reduced-motion:reduce){.login-shell *,.login-shell *::before,.login-shell *::after{animation:none !important;transition:none !important;scroll-behavior:auto !important;}}

/* Responsive stability: every randomized teacher scene stays inside the art
   frame, so portrait and landscape source images cannot jump over the copy. */
@media(min-width:701px) {
  .login-illustration {
    height:100%;
    max-height:none;
    bottom:0;
    object-fit:contain;
    object-position:center bottom;
  }
}

@media(max-width:700px) {
  .login-art {
    margin-top:12px;
    height:clamp(220px,58vw,250px);
  }
  .login-illustration {
    width:100%;
    height:100%;
    max-height:none;
    right:0;
    bottom:0;
    object-fit:contain;
    object-position:center bottom;
  }
}

/* The narrow tablet band still shows the supporting charts, but gives each
   card enough room for its labels before the desktop composition takes over. */
@media(max-width:820px) and (min-width:701px) {
  .login-layout {gap:16px;}
  .login-rings {left:9%;top:7%;width:45%;padding:8px;}
  .login-ring-row {gap:4px;}
  .login-ring-item {font-size:7px;}
  .login-ring-item svg {max-height:54px;margin-bottom:3px;}
  .login-parts {left:35%;top:28%;width:38%;padding:8px;}
  .login-parts strong {font-size:10px;margin-bottom:4px;}
  .login-part-row {gap:4px;margin:4px 0;font-size:7px;}
  .login-part-row>span {width:26px;}
  .login-part-row>div {height:5px;}
  .login-trend {left:6%;top:67%;width:36%;padding:8px;}
  .login-trend strong {font-size:10px;margin-bottom:3px;}
  .login-trend svg {height:44px;}
}

/* Short desktop and landscape viewports need a little vertical compression;
   this keeps the hero, form, and footer in the first viewport together. */
@media(min-width:821px) and (max-height:860px) {
  .login-shell {padding-top:18px;padding-bottom:10px;}
  .login-brand-logo {width:clamp(170px,16vw,225px);}
  .login-brand-subtitle {font-size:clamp(9px,.9vw,12px);}
  .login-layout {margin-top:18px;min-height:0;gap:28px;}
  .login-intro h1 {font-size:clamp(34px,3.8vw,54px);line-height:1.2;margin-bottom:12px;}
  .login-intro p {font-size:clamp(16px,1.6vw,22px);}
  .login-art {height:clamp(270px,42vh,360px);margin-top:12px;}
  .login-card.auth-container {padding:32px 32px 30px;}
  .login-card-heading {margin-bottom:24px;}
  .login-wave {width:46px;height:46px;margin-bottom:12px;}
  .login-card #auth-form {gap:18px !important;}
  .login-card .form-group {gap:6px;}
  .login-card .form-group label {font-size:14px;margin-bottom:5px;}
  body.login-page .login-card .form-control {height:48px;padding:10px 13px;font-size:15px;}
  body.login-page .login-card #auth-submit-btn {height:52px !important;font-size:17px;}
  .login-footer {margin-top:12px;}
}

/* Lightweight post-login transition. The route keeps loading underneath it,
   while the progress ring follows the short hand-off into the next view. */
.login-transition-overlay {position:fixed;inset:0;z-index:25000;display:grid;place-items:center;padding:1.5rem;background:linear-gradient(135deg,#edf6ff 0%,#ffffff 52%,#d9f3f0 100%);color:#071442;opacity:0;pointer-events:none;transition:opacity .18s ease-out;}
.login-transition-overlay.is-active {opacity:1;}
.login-transition-overlay.is-exiting {opacity:0;transition-duration:.24s;}
.login-transition-content {position:relative;z-index:2;display:grid;justify-items:center;gap:.62rem;margin-top:clamp(-4rem,-7vh,-1.5rem);text-align:center;transform:translateY(8px) scale(.96);animation:login-transition-content-in .46s cubic-bezier(.2,.8,.2,1) both;}
.login-transition-content strong {font-size:clamp(1.25rem,3vw,1.65rem);font-weight:850;letter-spacing:-.4px;}
.login-transition-content>span {color:#526287;font-size:.82rem;font-weight:650;}
.login-transition-mark {position:relative;display:grid;place-items:center;width:116px;height:116px;border-radius:50%;filter:drop-shadow(0 10px 24px #155bff1c);}
.login-transition-progress {position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(-90deg);}
.login-transition-progress-track,.login-transition-progress-ring {fill:none;stroke-width:7;}
.login-transition-progress-track {stroke:#dbe5f2;}
.login-transition-progress-ring {stroke:url(#login-transition-gradient);stroke-linecap:round;transition:stroke-dashoffset .04s linear;}
.login-transition-mark::before {content:"";position:absolute;inset:25px;border:2px dashed #65c6c1;border-radius:50%;opacity:.8;animation:login-transition-inner-spin 8s linear infinite;}
.login-transition-mark::after {content:"";position:absolute;inset:33px;background:rgba(255,255,255,.72);border:1px solid #ffffff;border-radius:50%;box-shadow:0 4px 14px #325e9817;}
.login-transition-percent {position:relative;z-index:1;color:#071442;font-size:1.15rem;font-weight:850;letter-spacing:-.4px;}
.login-transition-overlay.is-complete .login-transition-percent {color:#1057f5;}
.login-transition-character-wrap {position:absolute;left:50%;bottom:max(.55rem,2vh);z-index:1;display:grid;place-items:end center;width:min(280px,58vw);height:min(260px,31vh);pointer-events:none;transform:translateX(-50%);}
.login-transition-character {display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 12px 18px rgba(7,20,66,.14));opacity:1;transition:opacity .18s ease,transform .26s cubic-bezier(.2,.8,.2,1);animation:login-transition-character-in .5s .08s cubic-bezier(.2,.8,.2,1) both;}
.login-transition-character.is-changing {opacity:0;transform:translateY(8px) scale(.96);}
@keyframes login-transition-content-in {from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes login-transition-inner-spin {from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes login-transition-character-in {from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:600px){.login-transition-content{margin-top:-5vh}.login-transition-character-wrap{width:min(230px,64vw);height:min(220px,27vh);bottom:1vh;}}
@media(prefers-reduced-motion:reduce){.login-transition-overlay{transition:none}.login-transition-content,.login-transition-mark::before,.login-transition-character{animation:none}.login-transition-progress-ring,.login-transition-character{transition:none}.login-transition-character.is-changing{opacity:1;transform:none}.login-transition-overlay.is-active{opacity:1}.login-transition-overlay.is-exiting{opacity:0;}}
/* Keep the orbit and score cards behind the teacher illustration. */
.login-art {isolation:isolate;}
.login-orbit {z-index:0;}
.login-illustration {z-index:10 !important;mix-blend-mode:normal;}
.login-chart {z-index:1 !important;}
.login-parts {z-index:2;left:37%;width:27%;top:31%;}
.login-card .form-group {margin:0;}
@media(max-width:1050px) and (min-width:701px){.login-parts{left:37%;width:28%;padding:9px}.login-part-row{gap:5px;font-size:8px}.login-chart strong{font-size:10px}}

/* On desktop, let the teacher sit in front while chart cards move between
   tucked-behind and left-edge positions for a layered composition. */
.login-bubble {z-index:2;}
.login-spark {z-index:11;}
@media(min-width:701px) {
  /* The default positions are set by startLoginChartShuffle(). These compact
     dimensions keep the cards legible when they peek out from behind the
     illustration. */
  .login-illustration {width:68%;right:-1%;z-index:10 !important;}
  .login-rings {left:27%;top:7%;width:33%;z-index:1 !important;}
  .login-parts {left:39%;top:30%;width:28%;padding:10px 12px;z-index:1 !important;}
  .login-parts strong {margin-bottom:5px;}
  .login-parts .login-part-row {margin:4px 0;gap:7px;font-size:8px;}
  .login-parts .login-part-row>span {width:30px;}
  .login-parts .login-part-row>div {height:6px;}
  .login-trend {left:29%;top:67%;width:30%;padding:9px 12px;z-index:1 !important;}
  .login-trend strong {margin-bottom:4px;}
  .login-trend svg {height:54px;}
  .login-chart {
    --chart-rotate:0deg;
    z-index:1 !important;
    rotate:var(--chart-rotate);
    transition:left 1.7s cubic-bezier(.22,.78,.24,1),top 1.7s cubic-bezier(.22,.78,.24,1),rotate 1.7s cubic-bezier(.22,.78,.24,1),box-shadow .4s ease;
    will-change:left,top,rotate;
  }
  .login-chart.is-moving {box-shadow:0 12px 24px #325e9830;}
  .login-rings {animation:login-chart-drift-rings 6.4s ease-in-out infinite;}
  .login-parts {animation:login-chart-drift-parts 7.2s .35s ease-in-out infinite;}
  .login-trend {animation:login-chart-drift-trend 6.8s .7s ease-in-out infinite;}
}
@media(max-width:700px) {
  .login-bubble {right:5%;top:2%;}
}
@keyframes login-chart-drift-rings {0%,100%{translate:0 0}50%{translate:-3px -6px}}
@keyframes login-chart-drift-parts {0%,100%{translate:0 0}50%{translate:2px -4px}}
@keyframes login-chart-drift-trend {0%,100%{translate:0 0}50%{translate:-2px -5px}}

/* Final mobile composition. Keep the full login journey inside the first
   viewport on common phones while preserving comfortable touch targets. */
@media (max-width:700px) {
  body.login-page,
  body.login-page #app,
  body.login-page #app-main {
    min-width:0;
    overflow-x:hidden;
  }

  .login-shell {
    min-height:100svh;
    min-height:100dvh;
    width:100%;
    padding: max(12px, env(safe-area-inset-top)) clamp(14px, 5vw, 20px) max(10px, env(safe-area-inset-bottom));
    overflow-x:clip;
    overflow-y:visible;
  }

  .login-brand-logo { width:clamp(150px, 43vw, 176px); }
  .login-brand-subtitle { font-size:clamp(8px, 2.35vw, 9px); }

  .login-layout {
    width:100%;
    max-width:460px;
    margin:clamp(12px, 3vh, 20px) auto 0;
    gap:clamp(4px, 1vh, 8px);
  }

  .login-intro { width:100%; max-width:330px; }
  .login-intro h1 {
    font-size:clamp(26px, 7.6vw, 31px);
    line-height:1.15;
    letter-spacing:-.8px;
    margin-bottom:8px;
  }
  .login-intro p { font-size:clamp(14px, 4vw, 16px); line-height:1.35; }
  .login-intro p::after { bottom:-6px; height:4px; border-top-width:2px; }

  .login-art {
    height:clamp(145px, 39vw, 175px);
    margin-top:clamp(6px, 1.5vh, 12px);
  }
  .login-illustration {
    width:100%;
    height:100%;
    max-height:none;
    right:0;
    bottom:0;
    object-fit:contain;
    object-position:center bottom;
  }
  .login-bubble {
    right:6%;
    top:0;
    padding:10px 14px;
    font-size:clamp(13px, 3.6vw, 15px);
  }
  .login-spark-one { left:0; top:42%; font-size:27px; }
  .login-spark-two { right:0; top:26%; font-size:25px; }

  .login-card.auth-container {
    max-width:none;
    margin-top:0;
    margin-bottom:0 !important;
    padding:clamp(16px, 4.2vw, 20px) clamp(16px, 5.8vw, 23px) clamp(17px, 4.2vw, 20px);
    border-radius:20px;
  }
  .login-card-heading { margin-bottom:clamp(12px, 3vw, 17px); }
  .login-wave { width:30px; height:30px; margin-bottom:6px; }
  .login-card h2 { font-size:clamp(25px, 7vw, 29px); line-height:1.15; }
  .login-card #auth-form { gap:clamp(10px, 2.5vw, 13px) !important; }
  .login-card .form-group { gap:0; }
  .login-card .form-group label { font-size:14px; line-height:1.35; margin-bottom:4px; }
  body.login-page .login-card .form-control {
    height:45px;
    padding:9px 12px;
    font-size:16px;
  }
  body.login-page .login-card .auth-password-field input { padding-right:50px; }
  body.login-page .login-card #auth-submit-btn {
    height:47px !important;
    margin-top:0 !important;
    font-size:17px;
  }
  .login-mode-link-wrap { font-size:12px; }
  .login-footer { margin-top:10px; gap:1px; }
  .login-footer-logo { width:82px; }
  .login-footer-subtitle { font-size:7px; }
}

/* Compact portrait fallback for short phones. Inputs remain 16px so focusing
   them does not trigger Safari's automatic page zoom. */
@media (max-width:700px) and (max-height:740px) {
  .login-shell {
    padding-top:max(8px, env(safe-area-inset-top));
    padding-bottom:max(8px, env(safe-area-inset-bottom));
  }
  .login-brand-logo { width:clamp(140px, 40vw, 155px); }
  .login-brand-subtitle { font-size:8px; }
  .login-layout { margin-top:8px; gap:3px; }
  .login-intro { max-width:300px; }
  .login-intro h1 { font-size:clamp(24px, 6.8vw, 27px); line-height:1.12; margin-bottom:6px; }
  .login-intro p { font-size:14px; }
  .login-art { height:clamp(104px, 30vw, 118px); margin-top:5px; }
  .login-card.auth-container { padding:14px 16px 15px; border-radius:18px; }
  .login-card-heading { margin-bottom:10px; }
  .login-wave { width:26px; height:26px; margin-bottom:4px; }
  .login-card h2 { font-size:25px; }
  .login-card #auth-form { gap:9px !important; }
  .login-card .form-group label { font-size:13px; margin-bottom:3px; }
  body.login-page .login-card .form-control { height:43px; }
  body.login-page .login-card #auth-submit-btn { height:44px !important; font-size:16px; }
  .login-footer { display:none; }
}

/* The smallest supported phone width needs one more compact step so the
   primary action remains visible without making the form fields unreadable. */
@media (max-width:340px) and (max-height:700px) {
  .login-shell { padding-top:max(6px, env(safe-area-inset-top)); padding-bottom:max(5px, env(safe-area-inset-bottom)); }
  .login-brand-logo { width:130px; }
  .login-brand-subtitle { font-size:7px; }
  .login-layout { margin-top:5px; gap:2px; }
  .login-intro { max-width:280px; }
  .login-intro h1 { font-size:22px; line-height:1.08; margin-bottom:4px; }
  .login-intro p { font-size:13px; }
  .login-art { height:84px; margin-top:3px; }
  .login-bubble { padding:8px 11px; font-size:12px; }
  .login-card.auth-container { padding:12px 13px; border-radius:16px; }
  .login-card-heading { margin-bottom:8px; }
  .login-wave { width:23px; height:23px; margin-bottom:3px; }
  .login-card h2 { font-size:22px; }
  .login-card #auth-form { gap:7px !important; }
  .login-card .form-group label { font-size:12px; margin-bottom:2px; }
  body.login-page .login-card .form-control { height:42px; padding:8px 10px; font-size:16px; }
  body.login-page .login-card #auth-submit-btn { height:44px !important; min-height:44px !important; font-size:15px; }
}

/* On phones, pair the welcome copy with the brand so the illustration can
   use the vertical space that the stacked intro previously occupied. */
@media (max-width:700px) {
  .login-shell {
    display:grid;
    grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
    column-gap:clamp(8px, 2.4vw, 12px);
    align-content:start;
  }
  .login-layout,
  .login-hero { display:contents; }
  .login-brand {
    grid-column:1;
    grid-row:1;
    width:auto;
    max-width:100%;
    align-items:flex-start;
    justify-self:start;
  }
  .login-brand-logo { width:clamp(132px, 36vw, 150px); }
  .login-intro {
    grid-column:2;
    grid-row:1;
    width:auto;
    max-width:none;
    min-width:0;
    align-self:center;
  }
  .login-intro h1 {
    font-size:clamp(20px, 5.7vw, 24px);
    line-height:1.12;
    letter-spacing:-.5px;
    margin-bottom:6px;
  }
  .login-intro p { font-size:clamp(12px, 3.5vw, 14px); line-height:1.3; }
  .login-intro p::after { bottom:-5px; height:3px; border-top-width:2px; }
  .login-art {
    grid-column:1 / -1;
    grid-row:2;
    height:clamp(180px, 53vw, 220px);
    margin-top:clamp(10px, 2vh, 15px);
  }
  .login-card.auth-container { grid-column:1 / -1; grid-row:3; }
  .login-footer { grid-column:1 / -1; grid-row:4; }
}

@media (max-width:700px) and (max-height:740px) {
  .login-brand-logo { width:clamp(125px, 36vw, 140px); }
  .login-intro h1 { font-size:clamp(18px, 5.5vw, 21px); line-height:1.1; }
  .login-intro p { font-size:12px; }
  .login-art { height:clamp(132px, 38vw, 150px); margin-top:7px; }
}

@media (max-width:340px) and (max-height:700px) {
  .login-brand-logo { width:120px; }
  .login-intro h1 { font-size:18px; line-height:1.08; }
  .login-intro p { font-size:11px; }
  .login-art { height:110px; margin-top:4px; }
}

/* Friendly confirmation before a manual sign-out. The illustration keeps the
   decision feeling like part of the classroom rather than a browser alert. */
body.logout-confirm-open {overflow:hidden;}
.logout-confirm-overlay {position:fixed;inset:0;z-index:26000;display:grid;place-items:center;padding:1rem;background:rgba(7,20,66,.36);backdrop-filter:blur(12px) saturate(115%);-webkit-backdrop-filter:blur(12px) saturate(115%);opacity:0;animation:logout-confirm-overlay-in .22s ease-out forwards;}
.logout-confirm-overlay.is-closing {animation:logout-confirm-overlay-out .18s ease-in forwards;pointer-events:none;}
.logout-confirm-dialog {position:relative;display:grid;grid-template-columns:minmax(190px,40%) minmax(0,1fr);width:min(100%,620px);overflow:hidden;border:1px solid rgba(255,255,255,.8);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(241,249,255,.96));color:#071442;box-shadow:0 28px 80px rgba(7,20,66,.25),0 8px 26px rgba(16,87,245,.1);transform:translateY(12px) scale(.96);animation:logout-confirm-dialog-in .38s cubic-bezier(.2,.8,.2,1) forwards;}
.logout-confirm-close {position:absolute;top:12px;right:14px;z-index:3;width:34px;height:34px;border:1px solid rgba(7,20,66,.1);border-radius:50%;background:rgba(255,255,255,.78);color:#526287;font-size:1.3rem;line-height:1;cursor:pointer;transition:background .18s ease,color .18s ease,transform .18s ease;}
.logout-confirm-close:hover,.logout-confirm-close:focus-visible {background:#fff;color:#071442;transform:rotate(8deg) scale(1.04);outline:none;}
.logout-confirm-visual {position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:300px;overflow:hidden;background:linear-gradient(145deg,#eaf5ff 0%,#f5ffff 55%,#e4f7f2 100%);isolation:isolate;}
.logout-confirm-visual::after {content:"";position:absolute;left:50%;bottom:-70px;width:250px;height:120px;border-radius:50%;background:rgba(73,142,219,.14);filter:blur(16px);transform:translateX(-50%);z-index:-1;}
.logout-confirm-orbit {position:absolute;border:1.5px solid rgba(101,198,204,.5);border-radius:50%;pointer-events:none;}
.logout-confirm-orbit-one {width:190px;height:190px;top:20px;right:-72px;border-style:dashed;transform:rotate(24deg);}
.logout-confirm-orbit-two {width:92px;height:92px;left:-38px;bottom:28px;border-color:rgba(252,130,124,.48);}
.logout-confirm-art {position:absolute;z-index:1;left:50%;top:0;width:260px;height:auto;max-width:none;object-fit:contain;object-position:center top;transform:translate(-50%,16px);filter:drop-shadow(0 12px 16px rgba(7,20,66,.13));animation:logout-confirm-art-in .5s .08s cubic-bezier(.2,.8,.2,1) both;}
.logout-confirm-body {display:flex;flex-direction:column;justify-content:center;padding:2.35rem 2.45rem 2.15rem;}
.logout-confirm-eyebrow {margin-bottom:.55rem;color:#e46e68;font-size:.72rem;font-weight:850;letter-spacing:.13em;}
.logout-confirm-body h2 {margin:0;color:#071442;font-size:clamp(1.45rem,3vw,1.9rem);font-weight:850;letter-spacing:-.6px;line-height:1.18;}
.logout-confirm-body p {margin:.85rem 0 1.65rem;color:#526287;font-size:.95rem;font-weight:600;line-height:1.65;}
.logout-confirm-actions {display:grid;grid-template-columns:1fr 1.12fr;gap:.65rem;}
.logout-confirm-btn {min-height:46px;padding:.7rem 1rem;border-radius:13px;font:inherit;font-size:.9rem;font-weight:800;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;}
.logout-confirm-btn:hover,.logout-confirm-btn:focus-visible {transform:translateY(-2px);outline:none;}
.logout-confirm-btn-secondary {border:1px solid #d8e0ee;background:#fff;color:#526287;}
.logout-confirm-btn-secondary:hover,.logout-confirm-btn-secondary:focus-visible {border-color:#b9c9e2;background:#f8fbff;box-shadow:0 8px 18px rgba(7,20,66,.08);}
.logout-confirm-btn-primary {border:1px solid transparent;background:linear-gradient(135deg,#1057f5,#5a49d8);color:#fff;box-shadow:0 9px 20px rgba(16,87,245,.22);}
.logout-confirm-btn-primary:hover,.logout-confirm-btn-primary:focus-visible {box-shadow:0 12px 24px rgba(16,87,245,.3);}
@keyframes logout-confirm-overlay-in {from{opacity:0}to{opacity:1}}
@keyframes logout-confirm-overlay-out {from{opacity:1}to{opacity:0}}
@keyframes logout-confirm-dialog-in {from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes logout-confirm-art-in {from{opacity:0;transform:translate(-50%,22px) scale(.97)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@media(max-width:600px) {
  .logout-confirm-overlay {padding:14px;}
  .logout-confirm-dialog {grid-template-columns:1fr;width:min(100%,390px);border-radius:24px;}
  .logout-confirm-visual {min-height:185px;height:185px;}
  .logout-confirm-art {width:225px;height:auto;top:0;transform:translate(-50%,10px);}
  .logout-confirm-body {padding:1.35rem 1.25rem 1.25rem;text-align:center;}
  .logout-confirm-eyebrow {margin-bottom:.42rem;font-size:.66rem;}
  .logout-confirm-body h2 {font-size:1.42rem;}
  .logout-confirm-body p {margin:.68rem 0 1.2rem;font-size:.86rem;line-height:1.55;}
  .logout-confirm-actions {gap:.5rem;}
  .logout-confirm-btn {min-height:44px;padding:.65rem .75rem;font-size:.84rem;}
}
@media(max-width:370px) {
  .logout-confirm-actions {grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce) {
  .logout-confirm-overlay,.logout-confirm-dialog,.logout-confirm-art {animation:none;}
  .logout-confirm-overlay {opacity:1;}
  .logout-confirm-dialog {transform:none;}
  .logout-confirm-art {transform:translate(-50%,0);}
  .logout-confirm-overlay.is-closing {opacity:0;}
  .logout-confirm-close,.logout-confirm-btn {transition:none;}
}

/* Dark mode for the public sign-in route. Keep its friendly composition, but
   move every readable surface onto the same application theme tokens. */
html[data-theme="dark"] body.login-page {
  background: #080c14;
  color: #f8fafc;
}
html[data-theme="dark"] .login-shell {
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  background:
    radial-gradient(ellipse at 0 100%, rgba(30, 64, 175, .34) 0, transparent 40%),
    radial-gradient(ellipse at 100% 0, rgba(13, 148, 136, .24) 0, transparent 27%),
    #080c14;
  color: #f8fafc;
}
html[data-theme="dark"] .login-shell::before,
html[data-theme="dark"] .login-shell::after { border-color: rgba(94, 234, 212, .45); }
html[data-theme="dark"] :is(.login-brand, .login-intro h1, .login-card h2) { color: #f8fafc; }
html[data-theme="dark"] .login-brand-subtitle,
html[data-theme="dark"] .login-intro p,
html[data-theme="dark"] .login-card .form-group label,
html[data-theme="dark"] .login-mode-link-wrap,
html[data-theme="dark"] .login-footer { color: #cbd5e1; }
html[data-theme="dark"] .login-bubble {
  background: #9f5262;
  color: #fff1f2;
}
html[data-theme="dark"] .login-chart {
  background: rgba(15, 23, 42, .9);
  border-color: rgba(148, 163, 184, .28);
  color: #f8fafc;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
}
html[data-theme="dark"] .login-ring-track { stroke: rgba(255, 255, 255, .18); }
html[data-theme="dark"] .login-part-row > div { background: rgba(255, 255, 255, .14); }
html[data-theme="dark"] .login-trend svg path:first-child { stroke: rgba(255, 255, 255, .2); }
html[data-theme="dark"] .login-card.auth-container {
  background: rgba(15, 23, 42, .88) !important;
  border-color: rgba(148, 163, 184, .28);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .36);
  color: #f8fafc;
}
html[data-theme="dark"] body.login-page .login-card .form-control {
  background: rgba(15, 23, 42, .92) !important;
  border-color: rgba(148, 163, 184, .34);
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc;
  caret-color: #a5b4fc;
}
html[data-theme="dark"] body.login-page .login-card .form-control:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 4px rgba(129, 140, 248, .18);
}
html[data-theme="dark"] body.login-page .login-card .form-control:-webkit-autofill {
  box-shadow: 0 0 0 1000px #0f172a inset;
  -webkit-text-fill-color: #f8fafc;
}
html[data-theme="dark"] .login-card .auth-password-toggle { color: #cbd5e1; }
html[data-theme="dark"] .login-card .auth-tabs {
  background: rgba(30, 41, 59, .72);
  border-color: rgba(148, 163, 184, .24);
}
html[data-theme="dark"] .login-card .auth-tab { color: #cbd5e1; }
html[data-theme="dark"] .login-card .auth-tab.active { background: #1e293b; color: #c4b5fd; }
html[data-theme="dark"] .login-card .redeem-login-notice {
  color: #dbeafe;
  background: rgba(30, 64, 175, .28);
  border-color: rgba(96, 165, 250, .3);
}
html[data-theme="dark"] .login-footer-subtitle { color: #94a3b8; }
html[data-theme="dark"] .login-transition-overlay {
  background: linear-gradient(135deg, rgba(8, 12, 20, .98), rgba(15, 23, 42, .98));
  color: #f8fafc;
}
html[data-theme="dark"] .login-transition-overlay > * { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] .login-shell *,
  html[data-theme="dark"] .login-shell *::before,
  html[data-theme="dark"] .login-shell *::after { transition: none !important; }
}