/* ============================================
   TSC 智联师生 - 登录页共享样式
   来源：design/原型/智联师生TSC-学生.html + 智联师生TSC-教师.html
   适用：教师/管理员登录、学生登录
   令牌来源：design-tokens.css（全局引入）
   ============================================ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 纵向滚动必须只挂在根元素 html 上，由「视口」产生滚动条：
   平板横屏/分屏等「矮视口」下卡片高于一屏时，底部登录按钮仍能滚动到
   （原先 overflow:hidden 会把卡片下半部分，含登录按钮，直接截在屏外）。
   注意：overflow 若同时挂在 body 上，body 会变成内层滚动容器，
   卡片下溢部分被 body 吞掉，整页反而滚不动。 */
html {
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ============================================
   灵动背景层
   ============================================ */
.lively-bg {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-bg) 50%, var(--color-primary-50) 100%);
  overflow: hidden;
  z-index: 0;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  mix-blend-mode: multiply;
  will-change: transform;
}

.blob-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--color-blob-cyan), transparent 70%);
  top: -150px; left: -100px;
  animation: float1 22s ease-in-out infinite;
}
.blob-2 {
  width: 450px; height: 450px;
  background: radial-gradient(circle, var(--color-blob-mint), transparent 70%);
  top: 40%; right: -120px;
  animation: float2 26s ease-in-out infinite;
}
.blob-3 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--color-blob-peach), transparent 70%);
  bottom: -100px; left: 20%;
  animation: float3 24s ease-in-out infinite;
}
.blob-4 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, var(--color-blob-lilac), transparent 70%);
  top: 20%; left: 40%;
  animation: float4 28s ease-in-out infinite;
  opacity: 0.4;
}

@keyframes float1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(80px, 60px) scale(1.1); }
  66% { transform: translate(-40px, 100px) scale(0.95); }
}
@keyframes float2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-100px, -50px) scale(1.05); }
  66% { transform: translate(-60px, 80px) scale(0.9); }
}
@keyframes float3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(100px, -80px) scale(1.1); }
}
@keyframes float4 {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  50% { transform: translate(-80px, 60px) scale(1.15) rotate(180deg); }
}

.grid-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--login-grid-dot, rgba(45,156,219,0.08)) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* ============================================
   漂浮教育图标
   ============================================ */
.floating-icons {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.floating-icon {
  position: absolute;
  font-size: 28px;
  opacity: 0.35;
  animation: floatIcon 12s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08));
  color: var(--color-primary, #2563eb);
}

/* SVG 图标通用尺寸：1em 随容器字号缩放（替代原 emoji 字形） */
.ico {
  width: 1em;
  height: 1em;
  vertical-align: -0.14em;
  flex-shrink: 0;
  display: inline-block;
}

/* 浮动学科图标：低饱和多彩，保持灵动感 */
.floating-icon:nth-child(1) { color: #2563eb; }  /* 语文 · 蓝 */
.floating-icon:nth-child(2) { color: #d97706; }  /* 写字 · 橙 */
.floating-icon:nth-child(3) { color: #db2777; }  /* 美术 · 粉 */
.floating-icon:nth-child(4) { color: #059669; }  /* 科学 · 绿 */
.floating-icon:nth-child(5) { color: #ca8a04; }  /* 思考 · 黄 */
.floating-icon:nth-child(6) { color: #7c3aed; }  /* 数学 · 紫 */
.floating-icon:nth-child(7) { color: #0891b2; }  /* 英语 · 青 */
.floating-icon:nth-child(8) { color: #e11d48; }  /* 音乐 · 玫红 */

.floating-icon:nth-child(1) { top: 12%; left: 8%;  animation-delay: 0s;   animation-duration: 14s; }
.floating-icon:nth-child(2) { top: 18%; right: 10%; animation-delay: -3s;  animation-duration: 16s; }
.floating-icon:nth-child(3) { bottom: 20%; left: 12%; animation-delay: -6s; animation-duration: 13s; }
.floating-icon:nth-child(4) { bottom: 15%; right: 8%; animation-delay: -2s; animation-duration: 15s; }
.floating-icon:nth-child(5) { top: 50%; left: 5%;   animation-delay: -8s;  animation-duration: 17s; }
.floating-icon:nth-child(6) { top: 45%; right: 5%;  animation-delay: -5s;  animation-duration: 14s; }
.floating-icon:nth-child(7) { top: 75%; left: 30%;  animation-delay: -10s; animation-duration: 16s; }
.floating-icon:nth-child(8) { top: 8%; left: 50%;   animation-delay: -7s;  animation-duration: 15s; }

@keyframes floatIcon {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(15px, -20px) rotate(8deg); }
  50% { transform: translate(-10px, -35px) rotate(-5deg); }
  75% { transform: translate(20px, -15px) rotate(6deg); }
}

/* ============================================
   登录舞台
   ============================================ */
.login-stage {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  /* 移动端/平板浏览器地址栏会占用高度，dvh 更接近真实可视高度（不支持的浏览器忽略此行） */
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

/* ============================================
   玻璃拟态卡片
   ============================================ */
.login-card {
  width: 440px;
  max-width: 100%;
  background: var(--glass-bg, rgba(255, 255, 255, 0.72));
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.6));
  border-radius: var(--radius-2xl);
  box-shadow:
    0 20px 60px rgba(45, 156, 219, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  padding: var(--space-10) var(--space-8) var(--space-8);
  position: relative;
  animation: cardEnter 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  overflow: hidden;
}

.login-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--color-blob-cyan) 0%,
    var(--color-primary) 25%,
    var(--color-blob-lilac) 50%,
    var(--color-blob-coral) 75%,
    var(--color-blob-peach) 100%);
  background-size: 200% 100%;
  animation: shimmerBar 6s linear infinite;
}

@keyframes shimmerBar {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.92);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* ============================================
   品牌头部
   ============================================ */
.brand-header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.brand-icon-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: var(--space-4);
}

.brand-icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow:
    0 10px 30px rgba(45, 156, 219, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  animation: iconBreath 3s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

@keyframes iconGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes iconBreath {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.05) rotate(2deg); }
}

.brand-icon svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: white;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

.brand-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-icon-wrap::before,
.brand-icon-wrap::after {
  content: '';
  position: absolute;
  border-radius: 20px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.brand-icon-wrap::before {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-blob-cyan));
  opacity: 0.4;
  filter: blur(16px);
  animation: iconBreath 3s ease-in-out infinite;
  z-index: 1;
}

.brand-icon-wrap::after {
  width: 90px; height: 90px;
  border: 2px dashed var(--color-primary-ring, rgba(45, 156, 219, 0.25));
  animation: rotateRing 20s linear infinite;
}

@keyframes rotateRing {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.brand-title {
  font-size: var(--text-3xl);
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-active) 50%, var(--color-blob-lilac) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
  animation: titleGradient 6s ease infinite;
}

@keyframes titleGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.sub-title {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.sub-title::before,
.sub-title::after {
  content: '';
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-text-muted), transparent);
}

/* ============================================
   角色 Tab 切换（教师/管理员）
   ============================================ */
.role-switcher {
  display: flex;
  background: var(--color-bg-sunken);
  border-radius: var(--radius-full);
  padding: 4px;
  margin-bottom: var(--space-6);
  position: relative;
}

.role-tab {
  flex: 1;
  padding: 10px 0;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
  z-index: 2;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.role-tab .tab-icon {
  font-size: 16px;
  transition: transform var(--transition-base);
}

.role-tab:hover:not(.active) {
  color: var(--color-text);
}

.role-tab.active {
  color: var(--color-text-inverse);
}

.role-indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-600) 100%);
  border-radius: var(--radius-full);
  transition: transform var(--transition-slow) cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 8px rgba(45, 156, 219, 0.3);
  z-index: 1;
}

.role-switcher[data-role="admin"] .role-indicator {
  transform: translateX(100%);
}

.role-switcher[data-role="admin"] .role-tab[data-role="admin"],
.role-switcher[data-role="teacher"] .role-tab[data-role="teacher"] {
  color: var(--color-text-inverse);
}

.role-switcher[data-role="admin"] .role-tab[data-role="admin"] .tab-icon,
.role-switcher[data-role="teacher"] .role-tab[data-role="teacher"] .tab-icon {
  transform: scale(1.15);
}

/* ============================================
   提示框 Alerts
   ============================================ */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  line-height: 1.5;
  animation: alertIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  border: 1px solid transparent;
}

@keyframes alertIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.alert-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.alert-error {
  background: var(--state-error-bg, rgba(255, 245, 245, 0.85));
  color: var(--state-error);
  border-color: var(--state-error-light, rgba(229, 62, 62, 0.15));
  backdrop-filter: blur(8px);
}

.alert-warning {
  background: var(--state-warning-bg, rgba(255, 255, 240, 0.85));
  color: var(--state-warning-text);
  border-color: var(--state-warning-light, rgba(214, 158, 46, 0.2));
  backdrop-filter: blur(8px);
}

.alert-info {
  background: var(--state-info-bg, rgba(235, 248, 255, 0.85));
  color: var(--color-primary-700);
  border-color: var(--color-primary-ring, rgba(45, 156, 219, 0.15));
  backdrop-filter: blur(8px);
}

.alert.hidden { display: none; }

/* ============================================
   表单
   ============================================ */
.form-group {
  position: relative;
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
  font-weight: 500;
  transition: color var(--transition-fast);
}

.form-group:focus-within .form-label {
  color: var(--color-primary);
}

.form-label .required {
  color: var(--color-blob-coral);
  margin-left: 2px;
}

.input-wrap {
  position: relative;
  border-radius: var(--radius-md);
}

.input-wrap::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-md) + 2px);
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0deg,
    var(--color-primary) 60deg,
    var(--color-blob-cyan) 120deg,
    var(--color-blob-lilac) 180deg,
    var(--color-blob-coral) 240deg,
    transparent 300deg,
    transparent 360deg
  );
  opacity: 0;
  transition: opacity var(--transition-slow);
  z-index: 0;
  animation: rotateBorder 3s linear infinite;
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotateBorder {
  to { --angle: 360deg; }
}

.input-wrap:focus-within::before {
  opacity: 1;
}

.form-input,
.form-select {
  position: relative;
  width: 100%;
  height: 52px;
  padding: 0 var(--space-4);
  font-size: var(--text-lg);
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--glass-bg-light, rgba(255, 255, 255, 0.7));
  border: 1.5px solid var(--color-border-light, rgba(226, 232, 240, 0.8));
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  z-index: 1;
  backdrop-filter: blur(4px);
}

.form-input::placeholder {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.form-input:focus::placeholder {
  transform: translateX(8px);
  opacity: 0.5;
}

.form-input:hover,
.form-select:hover {
  border-color: var(--color-primary-200);
  background: var(--glass-bg-strong, rgba(255, 255, 255, 0.9));
}

.form-input:focus,
.form-select:focus {
  border-color: transparent;
  background: var(--color-bg-elevated, rgba(255, 255, 255, 0.95));
  box-shadow: 0 4px 16px var(--color-primary-ring, rgba(45, 156, 219, 0.12));
}

.input-with-icon {
  position: relative;
}

.input-with-icon .input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--color-text-muted);
  transition: all var(--transition-base);
  z-index: 2;
  pointer-events: none;
}

.input-with-icon .form-input,
.input-with-icon .form-select {
  padding-left: 48px;
}

.input-with-icon:focus-within .input-icon {
  color: var(--color-primary);
  transform: translateY(-50%) scale(1.15);
}

.select-wrapper {
  position: relative;
}

.select-wrapper::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  transition: all var(--transition-fast);
  z-index: 2;
}

.select-wrapper:focus-within::after {
  border-color: var(--color-primary);
  transform: translateY(-30%) rotate(-135deg);
}

.form-select {
  cursor: pointer;
  padding-right: 40px;
}

/* 密码显隐按钮 */
.pwd-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
  z-index: 3;
  font-size: 16px;
}

.pwd-toggle:hover {
  background: var(--color-bg-sunken);
  color: var(--color-primary);
}

.pwd-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 错误状态 */
.form-input.input-error,
.form-select.input-error {
  border-color: var(--state-error);
  background: var(--state-error-bg, rgba(255, 245, 245, 0.8));
  animation: shakeField 0.4s ease;
}

@keyframes shakeField {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.field-hint {
  font-size: var(--text-xs);
  color: var(--state-error);
  margin-top: var(--space-1);
  padding-left: 4px;
  display: none;
  animation: alertIn 0.25s ease both;
}

.field-hint.visible { display: block; }

/* ============================================
   点选验证码（教师/管理员/学生门户登录）
   ============================================ */
.point-captcha {
  border: 1.5px solid var(--color-border-light, rgba(226, 232, 240, 0.9));
  border-radius: var(--radius-md);
  background: var(--glass-bg, rgba(255, 255, 255, 0.75));
  padding: var(--space-3);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.point-captcha.pc-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.point-captcha.pc-done { border-color: #22c55e; }

.point-captcha-prompt {
  font-size: var(--text-sm);
  color: var(--color-text-secondary, #64748b);
  margin-bottom: var(--space-2);
  letter-spacing: 1px;
}

.point-captcha-prompt b {
  color: var(--color-primary-600, #2563eb);
  font-size: 1.2em;
  padding: 0 2px;
}

.point-captcha-stage {
  position: relative;
  width: 100%;
  border-radius: calc(var(--radius-md) - 4px);
  overflow: hidden;
  cursor: crosshair;
  line-height: 0;
}

.point-captcha-stage img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.pc-mark {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: var(--color-primary, rgba(37, 99, 235, 0.92));
  color: var(--color-text-inverse, #fff);
  font-size: 14px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.point-captcha-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.point-captcha-tip {
  font-size: var(--text-xs, 12px);
  color: var(--color-text-tertiary, #94a3b8);
}

.captcha-refresh {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: var(--text-xs, 12px);
  color: var(--color-primary-600, #2563eb);
  background: var(--color-primary-ring, rgba(37, 99, 235, 0.08));
  border: none;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: background var(--transition-base);
}

.captcha-refresh:hover { background: rgba(37, 99, 235, 0.16); }
.captcha-refresh:active { transform: scale(0.97); }

.captcha-refresh svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================
   记住我 + 忘记密码
   ============================================ */
.form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
}

.checkbox-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
  color: var(--color-text-secondary);
}

.checkbox-wrap input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.checkbox-mark {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--glass-bg-light, rgba(255,255,255,0.7));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.checkbox-mark svg {
  width: 12px;
  height: 12px;
  stroke: white;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.5);
  transition: all var(--transition-fast);
}

.checkbox-wrap input:checked + .checkbox-mark {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 2px 6px rgba(45, 156, 219, 0.3);
}

.checkbox-wrap input:checked + .checkbox-mark svg {
  opacity: 1;
  transform: scale(1);
}

.forgot-link {
  color: var(--color-primary);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--transition-fast);
}

.forgot-link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/* ============================================
   登录按钮（带光泽扫过）
   ============================================ */
.btn-login {
  position: relative;
  width: 100%;
  height: 52px;
  font-size: var(--text-lg);
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--color-text-inverse);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-active) 100%);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
  margin-top: var(--space-6);
  overflow: hidden;
  letter-spacing: 0.1em;
  box-shadow: var(--shadow-btn, 0 8px 20px rgba(45, 156, 219, 0.3));
}

.btn-login::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.6s ease;
}

.btn-login:hover::before {
  left: 100%;
}

.btn-login:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-hover, 0 12px 28px rgba(45, 156, 219, 0.4));
  background: linear-gradient(135deg, var(--color-primary-400) 0%, var(--color-primary) 100%);
}

/* ============================================
   锁定态样式（课堂链接 ?sid= 模式下，班级/姓名为只读字段）
   ============================================ */
.lock-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px 1px 5px;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 500;
  color: var(--state-warning);
  background: linear-gradient(135deg, var(--state-warning-bg) 0%, var(--state-warning-bg) 100%);
  border: 1px solid var(--state-warning-light);
  border-radius: 10px;
  vertical-align: middle;
  user-select: none;
}
.lock-tag svg { display: block; }

.locked-field {
  position: relative;
  background: linear-gradient(135deg, var(--state-warning-bg) 0%, var(--state-warning-bg) 100%) !important;
  border-color: var(--state-warning-light) !important;
  cursor: not-allowed;
}
.locked-field::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(
    135deg,
    transparent 0 8px,
    rgba(232, 201, 122, 0.05) 8px 16px
  );
  pointer-events: none;
}
.locked-text {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: var(--state-warning-text);
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  line-height: 1.4;
  user-select: text;
}
.lock-emoji {
  font-size: 14px;
  opacity: 0.7;
  margin-left: 4px;
}

/* 适配 input 容器：把 locked-field 与已有 .input-wrap 风格统一 */
.input-wrap.locked-field {
  display: flex;
  align-items: center;
  width: 100%;
  height: 48px;
  padding: 0 12px 0 44px;
  background: linear-gradient(135deg, var(--state-warning-bg) 0%, var(--state-warning-bg) 100%);
  border: 1.5px solid var(--state-warning-light);
  border-radius: 12px;
  position: relative;
  transition: all 0.25s;
}
.input-wrap.locked-field .input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 1;
}
.input-wrap.locked-field .lock-emoji {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: 0.65;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .locked-field::after { display: none; }
}

.btn-login:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(45, 156, 219, 0.3);
}

.btn-login:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-login .btn-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  z-index: 1;
}

.btn-login .spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.btn-login.loading .spinner { display: inline-block; }
.btn-login.loading .btn-text { opacity: 0.9; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   页脚
   ============================================ */
.login-footer {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.login-footer .hint-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--color-primary-ring, rgba(45, 156, 219, 0.08));
  border-radius: var(--radius-full);
  color: var(--color-primary);
  font-weight: 500;
}

.login-footer .copyright {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  opacity: 0.7;
}

/* ============================================
   装饰星点
   ============================================ */
.sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.sparkle {
  position: absolute;
  width: 4px; height: 4px;
  background: var(--color-primary);
  border-radius: 50%;
  opacity: 0;
  animation: sparkle 4s ease-in-out infinite;
}

.sparkle:nth-child(1) { top: 15%; left: 10%;  animation-delay: 0s; }
.sparkle:nth-child(2) { top: 25%; right: 15%; animation-delay: 1s; background: var(--color-blob-coral); }
.sparkle:nth-child(3) { bottom: 20%; left: 20%; animation-delay: 2s; background: var(--color-blob-mint); }
.sparkle:nth-child(4) { top: 40%; right: 10%; animation-delay: 3s; background: var(--color-blob-lilac); }
.sparkle:nth-child(5) { bottom: 30%; right: 25%; animation-delay: 1.5s; }
.sparkle:nth-child(6) { top: 60%; left: 15%; animation-delay: 2.5s; background: var(--color-blob-cyan); }

@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0); }
  50% { opacity: 0.8; transform: scale(1); }
}

/* ============================================
   响应式
   ============================================ */
@media (max-width: 480px) {
  .login-card {
    padding: var(--space-8) var(--space-6) var(--space-6);
  }
  .brand-title { font-size: var(--text-2xl); }
  .floating-icon { font-size: 22px; }
}

/* 矮视口适配（平板横屏 1024×768、720p 笔电、分屏窗口）：
   按高度分档压缩纵向留白，尽量让「进入工作台 / 进入课堂 / 进入学习中心」
   按钮留在首屏；即使仍放不下，也能靠纵向滚动看到（见文件顶部 html 的 overflow 说明）。 */
@media (max-height: 860px) {
  .login-card { padding: var(--space-6) var(--space-6) var(--space-5); }
  .brand-header { margin-bottom: var(--space-5); }
  .brand-icon-wrap { margin-bottom: var(--space-3); }
  .brand-icon { width: 56px; height: 56px; border-radius: 16px; }
  .brand-icon svg { width: 28px; height: 28px; }
  .brand-icon-wrap::before { width: 56px; height: 56px; border-radius: 16px; }
  .brand-icon-wrap::after { width: 72px; height: 72px; }
  .form-group { margin-bottom: var(--space-4); }
  .form-options { margin-bottom: var(--space-4); }
  .btn-login { margin-top: var(--space-4); }
  .login-footer { margin-top: var(--space-4); }
  /* 验证码图按比例收窄以省高度：点选坐标按渲染框换算（见 point-captcha.js），
     图片仍 100% 撑满 stage，命中标记/点击位置不受影响 */
  .point-captcha-stage { max-width: 300px; margin: 0 auto; }
}

/* 平板横屏（含浏览器工具栏后的 ~710~768 可视高度）与 720p 笔电：
   进一步压缩，让带验证码的教师登录页也能收进首屏 */
@media (max-height: 820px) {
  .login-stage { padding: var(--space-4); }
  .login-card { padding: var(--space-5) var(--space-5) var(--space-4); }
  .brand-header { margin-bottom: var(--space-4); }
  .brand-title { font-size: var(--text-2xl); }
  .sub-title { font-size: var(--text-base); }
  .brand-icon { width: 52px; height: 52px; }
  .brand-icon svg { width: 26px; height: 26px; }
  .brand-icon-wrap::before { width: 52px; height: 52px; }
  .brand-icon-wrap::after { width: 66px; height: 66px; }
  .form-input, .form-select, .btn-login { height: 46px; }
  .point-captcha { padding: var(--space-2); }
  .point-captcha-stage { max-width: 240px; }
}

@media (max-height: 620px) {
  /* 极矮视口（横屏小平板 / 分屏窗口）：隐藏纯装饰元素，进一步让位给表单 */
  .floating-icons, .sparkles { display: none; }
  .brand-header { margin-bottom: var(--space-3); }
  .brand-icon { width: 44px; height: 44px; }
  .brand-icon svg { width: 22px; height: 22px; }
  .brand-icon-wrap::before { width: 44px; height: 44px; }
  .brand-icon-wrap::after { width: 56px; height: 56px; }
  .sub-title { display: none; }
  .form-group { margin-bottom: var(--space-3); }
  .login-footer .hint-badge { display: none; }
  .point-captcha-prompt { margin-bottom: var(--space-1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}