:root { --ink:#3b2a52; --orange:#ff9f43; --pink:#ff7eb6; --blue:#5b8cff; --green:#45c78b; --line:#eadff5; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:linear-gradient(180deg,#8ed7ff 0%,#c8efff 42%,#fff5cf 100%); font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; overflow-x:hidden; }
.login-shell { display:grid; grid-template-columns:1.15fr .85fr; gap:34px; align-items:center; width:min(1100px,calc(100% - 36px)); min-height:100vh; margin:0 auto; padding:38px 0; }
.welcome-card { position:relative; padding:54px 48px; overflow:hidden; border:3px solid rgba(255,255,255,.72); border-radius:38px; background:linear-gradient(150deg,rgba(255,255,255,.9),rgba(255,247,218,.9)); box-shadow:0 28px 70px rgba(65,93,125,.18); }
.cloud { position:absolute; width:130px; height:48px; border-radius:999px; background:rgba(255,255,255,.8); }
.cloud::before,.cloud::after { position:absolute; border-radius:50%; background:inherit; content:""; }
.cloud::before { left:22px; bottom:18px; width:58px; height:58px; }.cloud::after { right:22px; bottom:17px; width:44px; height:44px; }
.cloud-a { top:28px; right:20px; }.cloud-b { left:-30px; bottom:48px; transform:scale(.72); }
.mascot { display:grid; width:104px; height:104px; place-items:center; border:4px solid #fff; border-radius:36px; background:#ffd7a1; box-shadow:0 14px 24px rgba(226,142,26,.2); font-size:56px; transform:rotate(-4deg); }
.welcome-tag { display:inline-block; margin-top:28px; padding:8px 14px; border-radius:999px; color:#db6d08; background:#fff0c6; font-size:13px; font-weight:850; }
h1 { position:relative; margin:20px 0 0; font-size:clamp(36px,5vw,64px); line-height:1.18; letter-spacing:-2px; }
.welcome-card p { position:relative; max-width:520px; margin:22px 0 0; color:#6e6680; font-size:16px; line-height:1.8; }
.bubble-row { display:flex; gap:12px; margin-top:30px; }
.bubble-row i { display:grid; width:52px; height:52px; place-items:center; border-radius:18px; background:white; box-shadow:0 10px 22px rgba(83,83,130,.12); font-size:25px; font-style:normal; animation:float 2.8s ease-in-out infinite; }
.bubble-row i:nth-child(2) { animation-delay:.4s; }.bubble-row i:nth-child(3) { animation-delay:.8s; }.bubble-row i:nth-child(4) { animation-delay:1.2s; }
@keyframes float { 50% { transform:translateY(-8px) rotate(3deg); } }
.login-card { padding:38px; border:3px solid rgba(255,255,255,.9); border-radius:34px; background:rgba(255,255,255,.94); box-shadow:0 28px 70px rgba(79,95,145,.18); }
.login-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:28px; }
.login-head span { font-size:29px; font-weight:900; }.login-head small { color:#8d839c; font-size:12px; }
label { display:block; margin-bottom:20px; color:#73677f; font-size:13px; font-weight:750; }
input { width:100%; height:66px; margin-top:9px; padding:0 20px; border:2px solid var(--line); border-radius:20px; outline:none; color:var(--ink); background:#fbf9ff; font-size:17px; transition:160ms ease; }
input:focus { border-color:#8eb0ff; box-shadow:0 0 0 5px rgba(91,140,255,.12); background:white; }
.login-error { min-height:22px; margin:-4px 0 12px; color:#e14d64; font-size:12px; }
.login-button { display:flex; align-items:center; justify-content:space-between; width:100%; height:68px; padding:0 22px; border:0; border-radius:22px; color:white; background:linear-gradient(135deg,#ff9f43,#ff7b5f); box-shadow:0 14px 28px rgba(255,136,63,.3); font-size:17px; font-weight:850; cursor:pointer; }
.login-button:hover { transform:translateY(-2px); }.login-button:disabled { opacity:.7; transform:none; }
.login-button b { display:grid; width:34px; height:34px; place-items:center; border-radius:50%; background:rgba(255,255,255,.2); }
.login-help,.teacher-entry { margin-top:18px; color:#93899f; font-size:12px; text-align:center; }
.teacher-entry a { color:#5b7fe0; font-weight:800; text-decoration:none; }
@media (max-width:820px) { .login-shell { grid-template-columns:1fr; padding:20px 0 36px; }.welcome-card { padding:34px 28px; }.welcome-card h1 { font-size:38px; }.mascot { width:78px; height:78px; border-radius:26px; font-size:42px; }.login-card { padding:28px; } }
/* ===== 学生登录页左侧：纯卡通插图 ===== */
.welcome-card { display: grid; place-items: center; padding: 30px; }
.welcome-card .scene { width: 100%; max-width: 430px; }
.welcome-card .kid-scene { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 40px rgba(65,93,125,.16)); }
.welcome-card .float-a { animation: sceneFloat 5.5s ease-in-out infinite; }
.welcome-card .float-b { animation: sceneDrift 6.5s ease-in-out infinite; }
.welcome-card .float-c { animation: sceneDrift 7.5s ease-in-out infinite reverse; }
.welcome-card .bear { animation: bearSway 4.6s ease-in-out infinite; transform-origin: 200px 300px; }
.welcome-card .twinkle { animation: sceneTwinkle 2.4s ease-in-out infinite; transform-origin: center; }
.welcome-card .twinkle.t2 { animation-delay: .8s; }
.welcome-card .twinkle.t3 { animation-delay: 1.5s; }
@keyframes sceneFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes sceneDrift { 0%,100% { transform: translateX(0); } 50% { transform: translateX(14px); } }
@keyframes bearSway { 0%,100% { transform: rotate(-1.4deg) translateY(0); } 50% { transform: rotate(1.4deg) translateY(-4px); } }
@keyframes sceneTwinkle { 0%,100% { opacity: .4; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }
@media (max-width: 820px) { .welcome-card .scene { max-width: 260px; } }