:root { color-scheme: dark; font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif; color: #e6f1f2; background: #0c171f; --muted: #91a8b3; --aqua: #70e3da; --line: #28424e; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-width: 320px; min-height: 100%; }
body { background: radial-gradient(ellipse at 15% 30%, #16303a80, transparent 58%), #0c171f; }
button, input { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--aqua); outline-offset: 5px; }
button:disabled { cursor: wait; opacity: .6; }
.login-page { width: min(1080px, calc(100% - 96px)); min-height: 100vh; min-height: 100svh; margin: auto; display: flex; flex-direction: column; }
.login-brand { display: flex; align-items: center; gap: 15px; min-height: 108px; font-size: 18px; font-weight: 700; letter-spacing: .08em; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 42px; background: #17343f; border: 1px solid #2b535f; border-radius: 12px 3px 12px 3px; color: #70e3da; font: 700 17px "Consolas", monospace; }
.brand-divider { margin: 0 12px; color: #507582; font-weight: 400; }
.login-brand > small { margin-left: auto; font: 10px "Consolas", monospace; letter-spacing: .22em; color: #819da9; }
.login-shell { display: grid; grid-template-columns: 1fr minmax(340px, 420px); align-items: center; gap: clamp(44px, 8vw, 106px); flex: 1; padding: 30px 0 54px; }
.companion { position: relative; align-self: center; padding: 22px 0 0; }
.companion-heading, .companion-footer { display: flex; align-items: center; justify-content: space-between; }
.tiny-label { color: #92b3bf; font: 11px "Consolas", monospace; letter-spacing: .21em; }
.signal { display: flex; align-items: end; gap: 4px; height: 13px; }
.signal i { display: block; width: 3px; height: 5px; background: #5ec7bb; border-radius: 1px; }
.signal i:nth-child(2) { height: 9px; }.signal i:nth-child(3) { height: 13px; }
.robot-stage { height: 365px; position: relative; display: grid; place-items: center; isolation: isolate; }
.robot-stage::before { content: ""; position: absolute; width: 90%; aspect-ratio: 1; background: radial-gradient(circle, #5cd2d413, #67d9e604 58%, transparent 70%); border-radius: 50%; }
.robot-figure { position: relative; margin-top: 3px; width: min(265px, 75%); z-index: 2; transform: translate3d(var(--walk-x, 0px), var(--walk-y, 0px), 0) rotate(var(--walk-tilt, 0deg)); transition: transform 600ms ease; filter: drop-shadow(0 22px 18px #020a1160); }
.robot-figure img { display: block; width: 100%; height: auto; user-select: none; image-rendering: auto; }
.robot-platform { position: absolute; bottom: 28px; width: 62%; height: 23px; border: 1px solid #67d7d62e; background: radial-gradient(ellipse, #51d2ce12, transparent 72%); border-radius: 50%; box-shadow: 0 0 35px #41ccd90a; }
.orbit { position: absolute; width: 90%; height: 92px; border: 1px solid #314e58; border-radius: 50%; bottom: 64px; transform: rotate(-16deg); }
.orbit-back { z-index: 0; opacity: .65; }.orbit-front { z-index: 3; border-top-color: transparent; border-right-color: transparent; opacity: .6; pointer-events: none; }
.orbit-front::after { content: ""; position: absolute; left: 12%; bottom: 0; width: 5px; height: 5px; background: var(--aqua); border-radius: 50%; box-shadow: 0 0 12px #68e3dc88; }
.companion-footer { border-top: 1px solid var(--line); padding-top: 18px; color: #a8c1c8; font-size: 12px; letter-spacing: .1em; }
.status-light { display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 9px #70e3da66; }
.motion-toggle { display: grid; place-items: center; width: 29px; height: 29px; padding: 5px; border: 1px solid #34515b; border-radius: 50%; color: #a4c5cb; background: transparent; }
.motion-toggle svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.motion-toggle .play-icon { display: none; }.motion-toggle[aria-pressed="true"] .pause-icon { display: none; }.motion-toggle[aria-pressed="true"] .play-icon { display: block; }
.access { padding: 30px 0; }
.access-heading { margin-bottom: 38px; }
.access-heading .tiny-label { color: #6acec7; }
h1 { font-size: clamp(32px, 4vw, 46px); letter-spacing: .03em; font-weight: 650; line-height: 1.3; margin: 12px 0 0; }
h1 > span { color: var(--aqua); margin-left: 4px; }
.account-heading, .password-label { display: flex; align-items: center; justify-content: space-between; color: #b6cbd0; font-size: 13px; margin-bottom: 13px; }
.step-count { color: #6f939f; font: 10px "Consolas", monospace; letter-spacing: .14em; }
.account-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.account-button { position: relative; display: grid; justify-items: start; gap: 17px; min-height: 143px; padding: 22px; border: 1px solid #314b58; border-radius: 16px; color: #dcebed; background: linear-gradient(145deg, #1b303c, #132631); text-align: left; box-shadow: inset 0 1px #ffffff07, 0 8px 22px #00000015; transition: border-color .2s, background-color .2s, transform .2s; }
.account-button:hover { border-color: #71b1b8; transform: translateY(-2px); }
.account-button[aria-pressed="true"] { border-color: #75ddd3; background: linear-gradient(145deg, #264951, #19323c); box-shadow: inset 0 1px #c5fff51a, 0 0 0 1px #5fd8ce22; }
.account-avatar { height: 40px; width: 40px; display: grid; place-items: center; background: #25424e; border: 1px solid #42616d; border-radius: 12px; color: #bcd0d7; }
.admin-avatar svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.learner-avatar { position: relative; font: 600 25px "Consolas", monospace; color: #97eee1; border-color: #47746f; background: #2c5557; }
.learner-avatar > span { font-size: 11px; position: absolute; top: -5px; right: -5px; color: #a4edc7; }
.account-name { font-size: 18px; font-weight: 650; letter-spacing: .02em; }
.account-check { position: absolute; right: 20px; top: 24px; font-size: 17px; font-weight: 400; color: #6f9aa8; }
.account-button[aria-pressed="true"] .account-check { color: #9eece1; }
.password-panel { margin-top: 28px; animation: passwordReveal .24s ease-out; }
.password-field { display: flex; align-items: center; min-height: 58px; border: 1px solid #3b5864; background: #091921; border-radius: 12px; transition: border-color .2s, box-shadow .2s; }
.password-field:focus-within { border-color: #78dcd7; box-shadow: 0 0 0 3px #70e3da12; }
.lock-icon { width: 19px; height: 19px; margin-left: 18px; flex-shrink: 0; fill: none; stroke: #8cb5bf; stroke-width: 1.5; }
#username, #password { min-width: 0; width: 100%; border: 0; outline: 0; box-shadow: none; padding: 15px 12px; font-size: 17px; color: #f0f7f5; background: transparent; border-radius: 10px; }
#username::placeholder, #password::placeholder { color: #77919d; font-size: 14px; letter-spacing: .02em; }
.password-toggle { display: grid; place-items: center; min-height: 44px; min-width: 44px; margin: 0 5px 0 0; border: 0; border-radius: 8px; background: transparent; color: #95b3be; }
.password-toggle svg { height: 20px; width: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }.password-toggle:hover { color: #d9f9f4; background: #1a323d; }
.login-message { margin: 0; color: #ffb9a9; font-size: 12px; line-height: 1.7; }
.login-message:not(:empty) { margin-top: 12px; }
.login-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; margin-top: 18px; padding: 0 21px; border: 1px solid #91ede3; border-radius: 12px; color: #10282d; background: linear-gradient(115deg, #94e7d4, #6bd7d7); box-shadow: inset 0 1px #e4fff680, 0 6px 18px #4ed4cc12; font-size: 16px; font-weight: 700; transition: filter .2s, transform .2s; }
.login-submit > span:last-child { font-size: 22px; font-weight: 400; }.login-submit:hover { filter: brightness(1.06); }.login-submit:active { transform: translateY(1px); }
.selection-hint { margin: 19px 0 0; color: #8faab7; font-size: 12px; }
.login-continue { display: block; margin-top: 16px; color: #c2f7f6; text-align: center; font-size: 14px; line-height: 1.7; text-underline-offset: 4px; }
.login-continue:focus-visible { outline: 2px solid #c2f7f6; outline-offset: 5px; }
.login-footer { display: flex; align-items: center; gap: 18px; height: 65px; color: #7897a4; font: 10px "Consolas", "Microsoft YaHei", monospace; letter-spacing: .15em; }
.footer-rule { height: 1px; flex: 1; background: #29404c; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 !important; }
@keyframes passwordReveal { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (max-width: 780px) {
  .login-page { width: min(460px, calc(100% - 48px)); }
  .login-brand { min-height: 76px; font-size: 15px; gap: 12px; }.brand-mark { width: 33px; height: 35px; font-size: 14px; }.login-brand > small { font-size: 8px; letter-spacing: .1em; }.brand-divider { margin: 0 8px; }
  .login-shell { position: relative; display: block; padding: 36px 0 24px; flex: 1; }
  .companion { position: absolute; padding: 0; right: 0; top: -12px; width: 110px; height: 125px; pointer-events: none; }.companion-heading, .companion-footer, .orbit, .robot-platform { display: none; }.robot-stage { height: 125px; }.robot-stage::before { display: none; }.robot-figure { width: 88px; margin: 0; }
  .access { padding: 0; }.access-heading { margin: 0 0 31px; padding-right: 104px; }.access-heading .tiny-label { font-size: 9px; letter-spacing: .18em; }h1 { font-size: 34px; margin-top: 9px; }
  .account-button { min-height: 124px; padding: 18px; gap: 13px; border-radius: 14px; }.account-avatar { width: 34px; height: 34px; border-radius: 10px; }.learner-avatar { font-size: 22px; }.account-name { font-size: 17px; }.account-check { top: 21px; right: 17px; }
  .password-panel { margin-top: 23px; }.password-field { min-height: 54px; }.login-submit { min-height: 52px; margin-top: 16px; }.login-footer { height: 50px; }
}
@media (max-width: 780px) and (max-height: 700px) {
  .login-brand { min-height: 63px; }.login-shell { padding: 21px 0 22px; }.companion { top: -19px; }.access-heading { margin-bottom: 23px; }h1 { font-size: 30px; }.account-button { min-height: 107px; padding: 14px 17px; gap: 9px; }.account-avatar { width: 31px; height: 31px; }.account-avatar svg { width: 23px; height: 23px; }.account-check { top: 17px; }.password-panel { margin-top: 19px; }.login-footer { height: 38px; }.password-label { margin-bottom: 10px; }
}
@media (max-width: 360px) { .login-page { width: calc(100% - 32px); }.login-brand > small { display: none; }.account-options { gap: 10px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Cloud voyage: vivid scenery with clear, tactile controls. */
:root {
  color: #f3fbff;
  background: #08192e;
  --muted: #bdd2de;
  --aqua: #75ebec;
  --line: #6bbddd55;
  --violet: #c9a9ff;
  --gold: #ffd68c;
}

body {
  background:
    radial-gradient(ellipse at 28% 42%, #167bca44, transparent 39%),
    linear-gradient(105deg, #071527d9 0%, #0a2341a8 49%, #08192de7 100%),
    url("/theme-cloud-archipelago-v1.webp") center center / cover fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 9% 11%, #a9f7ff33 0 1px, transparent 2px),
    radial-gradient(circle at 69% 16%, #ffdfaa66 0 1px, transparent 2px),
    radial-gradient(circle at 90% 79%, #bd9bff55 0 1px, transparent 2px),
    linear-gradient(180deg, transparent 54%, #05132285 100%);
}

.login-page { position: relative; isolation: isolate; width: min(1160px, calc(100% - 88px)); }
.login-brand { min-height: 96px; color: #f1fbff; text-shadow: 0 2px 18px #061322aa; }
.brand-mark {
  width: 44px;
  height: 44px;
  color: #092633;
  background: linear-gradient(145deg, #a4fff2, #6ad7f4);
  border: 1px solid #d5fff5;
  border-radius: 15px 5px 15px 5px;
  box-shadow: inset 0 2px #ffffffa8, 0 7px 0 #082235, 0 13px 26px #020c20aa;
}
.brand-divider { color: #9ebef0; }
.login-brand > small { color: #c3e9f9; }
.login-shell { grid-template-columns: minmax(0, 1fr) minmax(350px, 440px); gap: clamp(35px, 5vw, 72px); }

.companion {
  min-height: 505px;
  padding: 27px 30px 21px;
  overflow: hidden;
  border: 1px solid #8ee9f16b;
  border-radius: 32px;
  background:
    radial-gradient(circle at 53% 58%, #35c8e459, transparent 42%),
    radial-gradient(circle at 11% 5%, #b697f641, transparent 35%),
    linear-gradient(150deg, #133a61e5, #0a263fe8 55%, #0a1b3de8);
  box-shadow: inset 0 1px #d8ffff6b, inset 0 -18px 35px #07152288, 0 25px 65px #03101bc7;
  backdrop-filter: blur(14px);
}
.companion::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid #b1ecff27;
  border-radius: 23px;
  pointer-events: none;
}
.companion-heading, .companion-footer { position: relative; z-index: 4; }
.tiny-label { color: #b8e7f6; }
.signal i { background: linear-gradient(#c4ffcd, #5bd9f0); box-shadow: 0 0 9px #86f6f3a3; }
.robot-stage { height: 375px; }
.robot-stage::before {
  width: 85%;
  background: radial-gradient(circle, #b2f7ff48, #59ceee1c 48%, transparent 71%);
  box-shadow: 0 0 110px #65e5ee22;
}
.robot-figure { width: min(290px, 82%); filter: drop-shadow(0 27px 15px #00152b99) drop-shadow(0 0 24px #a6f5ff33); }
.robot-platform {
  bottom: 23px;
  height: 28px;
  border-color: #b3f8fa8a;
  background: radial-gradient(ellipse, #71e5f09c, #45c3ec38 42%, transparent 70%);
  box-shadow: 0 0 55px #69e5f468;
}
.orbit { border-color: #9adff28a; box-shadow: 0 0 25px #86dff72f; }
.orbit-front::after { width: 8px; height: 8px; background: var(--gold); box-shadow: 0 0 18px var(--gold); }
.companion-footer { border-top-color: #b1eaff48; color: #d4eff7; }
.motion-toggle {
  width: 34px;
  height: 34px;
  border-color: #a9dff28a;
  color: #e7fbff;
  background: #102f4dbd;
  box-shadow: inset 0 1px #ffffff30, 0 4px 12px #02142188;
}
.motion-toggle:hover { background: #235774; }

.access {
  position: relative;
  padding: 34px;
  border: 1px solid #a7eaff74;
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0%, #aa82f735, transparent 38%),
    linear-gradient(155deg, #112d4bf2, #0c2138f5 65%, #111d3aec);
  box-shadow: inset 0 1px #e8ffff58, 0 8px 0 #06172a, 0 28px 65px #03101bd1;
  backdrop-filter: blur(22px);
}
.access::before {
  content: "";
  position: absolute;
  top: 0;
  left: 32px;
  right: 32px;
  height: 3px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(90deg, #7eece8, #9caeff 50%, #ffd797);
  box-shadow: 0 0 22px #96def6a3;
}
.access-heading { margin-bottom: 32px; }
.access-heading .tiny-label { color: #9fece9; }
h1 { color: #f7fcff; font-weight: 760; letter-spacing: -.045em; text-shadow: 0 4px 20px #031323; }
h1 > span { color: var(--gold); }
.account-heading, .password-label { color: #dcecf7; font-weight: 650; }
.step-count { color: #a9c8e6; }
.account-options { gap: 12px; }
.account-button {
  min-height: 148px;
  border-color: #719bc48c;
  border-radius: 19px;
  background: linear-gradient(150deg, #203e63, #142e4d 72%, #102b47);
  box-shadow: inset 0 1px #eaffff4a, 0 6px 0 #071c31, 0 16px 28px #020d22a8;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, border-color .2s, background .2s;
}
.account-button:first-child { background: linear-gradient(150deg, #334374, #202f5b 72%, #152948); }
.account-button:last-child { background: linear-gradient(150deg, #205668, #17445a 72%, #15304b); }
.account-button:hover:not(:disabled) {
  transform: translateY(-4px);
  border-color: #b9efff;
  box-shadow: inset 0 1px #ffffff85, 0 10px 0 #071c31, 0 23px 32px #020d22b8;
}
.account-button:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px #ffffff44, 0 3px 0 #071c31, 0 9px 18px #020d22ab; }
.account-button[aria-pressed="true"] {
  border-color: #abf3f0;
  background: linear-gradient(145deg, #366985, #244e6d);
  box-shadow: inset 0 1px #e6ffffad, 0 6px 0 #082a3c, 0 0 0 3px #75ece659, 0 18px 36px #031523;
}
.account-button:first-child[aria-pressed="true"] { border-color: #cdb5ff; background: linear-gradient(145deg, #5a568e, #32476f); box-shadow: inset 0 1px #ffffff9c, 0 6px 0 #22264f, 0 0 0 3px #c9a9ff59, 0 18px 36px #031523; }
.account-avatar { border-color: #bfd6ff8f; background: #d5d8ff29; color: #e9e3ff; box-shadow: inset 0 1px #ffffff44; }
.learner-avatar { border-color: #a6fff1a8; background: #8cf9e32e; color: #c9fff5; }
.learner-avatar > span { color: var(--gold); }
.account-name { color: #f4fbff; text-shadow: 0 2px 12px #06182d; }
.account-check { color: #bdd5ee; }
.account-button[aria-pressed="true"] .account-check { color: #fff1ba; }
.password-field { border-color: #85afce9c; background: #071c31e8; box-shadow: inset 0 2px 8px #020e1d80, 0 4px 0 #07172c; }
.password-field:focus-within { border-color: #9bf4ee; box-shadow: inset 0 2px 8px #020e1d80, 0 0 0 4px #74ebea2e, 0 4px 0 #07172c; }
.lock-icon { stroke: #b8e4ee; }
#username::placeholder, #password::placeholder { color: #a5bfcf; }
.password-toggle { color: #c3dce6; }
.password-toggle:hover { color: white; background: #244b66; }
.login-submit {
  min-height: 58px;
  border-color: #e2fff1;
  border-radius: 15px;
  background: linear-gradient(105deg, #b4ffdb 0%, #7dece9 53%, #9aceff 100%);
  color: #0b2840;
  box-shadow: inset 0 2px #ffffffa8, 0 6px 0 #1b7188, 0 17px 28px #032138a8;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, filter .2s;
}
.login-submit:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-3px); box-shadow: inset 0 2px #ffffffbf, 0 9px 0 #1b7188, 0 21px 30px #032138bd; }
.login-submit:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 2px #ffffffa8, 0 3px 0 #1b7188, 0 8px 16px #032138a8; }
.selection-hint { color: #c2d8e9; }
.login-footer { color: #c9e2ee; text-shadow: 0 2px 14px #061729; }
.footer-rule { background: linear-gradient(90deg, #87d9e4aa, #bbabffaa, #ffd68caa); }

@media (max-width: 780px) {
  body { background-position: center, center, 57% center; background-attachment: scroll; }
  .login-page { width: min(470px, calc(100% - 32px)); }
  .login-brand { min-height: 74px; }
  .brand-mark { width: 37px; height: 37px; }
  .login-shell { padding: 24px 0 30px; }
  .companion { min-height: 0; top: 6px; right: 17px; width: 104px; height: 112px; padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; overflow: visible; }
  .companion::before { display: none; }
  .robot-stage { height: 112px; }
  .robot-figure { width: 88px; filter: drop-shadow(0 10px 9px #061322b8) drop-shadow(0 0 13px #9de8ff6b); }
  .access { padding: 29px 23px 26px; border-radius: 24px; }
  .access::before { left: 23px; right: 23px; }
  .access-heading { padding-right: 92px; margin-bottom: 30px; }
  .companion { display: none; }
  .access-heading { padding-right: 0; }
  h1 { font-size: clamp(30px, 8vw, 37px); }
  .account-button { min-height: 125px; padding: 16px; gap: 12px; }
}

@media (max-width: 400px) {
  .login-brand { gap: 9px; }
  .login-brand > small { display: none; }
  .access { padding: 26px 17px 24px; }
  .access::before { left: 17px; right: 17px; }
  .account-options { gap: 9px; }
  .account-button { min-height: 116px; padding: 13px; }
  .account-name { font-size: 15px; }
  .account-check { top: 16px; right: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .account-button, .login-submit, .robot-figure { transform: none !important; }
}
/* 2026-10-11: the robot companion is gone; the login card stands alone in the middle. */
.login-shell { display: flex; justify-content: center; align-items: center; }
.login-shell > .access { width: min(440px, 100%); }