:root {
  --ink:#101827;
  --muted:#667085;
  --line:#dbe3ef;
  --paper:#eef3f9;
  --white:#fff;
  --navy:#111a2e;
  --navy-2:#17233d;
  --blue:#2f6df6;
  --red:#ef4e5d;
  --gold:#f6b73c;
  --green:#24b483;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { min-height:100%; background:var(--paper); }
body {
  min-height:100%;
  margin:0;
  color:var(--ink);
  background:
    linear-gradient(180deg, rgba(17,26,46,.04), rgba(238,243,249,0) 260px),
    var(--paper);
  font-family: Inter, "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei", sans-serif;
}
button,input { font:inherit; }
button { cursor:pointer; }

.auth-screen {
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(320px,.86fr) minmax(420px,1.14fr);
  align-items:center;
  gap:clamp(38px,7vw,118px);
  padding:7vh clamp(28px,7vw,132px);
  overflow:hidden;
}
.auth-art {
  position:relative;
  width:min(42vw,520px);
  aspect-ratio:1;
  border-radius:28px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,0)),
    url("../assets/images/home/home-teacher-space-hero.png") center/cover,
    linear-gradient(135deg,#1f2a44,#284c84);
  box-shadow:0 34px 80px rgba(16,24,39,.18);
  overflow:hidden;
}
.auth-art::after {
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:18px;
}
.art-card {
  position:absolute;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-radius:8px;
  box-shadow:0 24px 45px rgba(9,18,33,.24);
}
.art-card-back {
  width:62%;
  height:38%;
  left:10%;
  top:20%;
  padding-left:28px;
  color:#fff;
  background:linear-gradient(135deg,#2f6df6,#26c6da);
  font-size:clamp(28px,4vw,54px);
  font-weight:950;
  letter-spacing:.08em;
  transform:rotate(-8deg);
}
.art-card-front {
  width:48%;
  height:36%;
  right:8%;
  bottom:18%;
  padding-left:24px;
  color:var(--ink);
  background:#fff;
  border:8px solid var(--gold);
  transform:rotate(7deg);
}
.art-card-front b { font-size:clamp(34px,5vw,64px); color:var(--red); }
.art-card-front small { color:var(--muted); font-weight:800; }
.art-pencil,.art-orbit,.art-star { display:none; }
.auth-copy { max-width:620px; }
.brand-mark {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--ink);
  font-size:14px;
  font-weight:900;
  text-decoration:none;
  letter-spacing:.02em;
}
.brand-mark span {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--red));
  border-radius:8px;
  font-size:12px;
}
.auth-copy h1 {
  margin:36px 0 18px;
  font-size:clamp(38px,4.6vw,72px);
  line-height:1.08;
  letter-spacing:0;
  font-weight:900;
}
.auth-copy h1 strong { color:var(--blue); }
.auth-lead { max-width:500px; color:var(--muted); line-height:1.85; font-size:16px; }
.activation-form { margin-top:30px; }
.activation-form label { display:block; margin-bottom:10px; color:var(--navy); font-size:13px; font-weight:950; }
.auth-modes { display:flex; gap:6px; margin:0 0 12px; }
.password-fields { display:grid; gap:9px; margin:0 0 11px; }
.password-fields input { min-height:48px; width:100%; border:1px solid var(--line); border-radius:9px; padding:0 14px; color:var(--navy); background:#fff; font:inherit; font-size:14px; font-weight:750; outline:none; }
.password-fields input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(47,109,246,.12); }
.password-fields label { margin:0; }
.password-fields.is-teaching #passwordConfirm { display:none; }
.auth-mode {
  border:1px solid transparent;
  border-radius:8px;
  padding:8px 13px;
  color:var(--muted);
  background:rgba(255,255,255,.55);
  font-size:12px;
  font-weight:900;
}
.auth-mode.is-active { color:#fff; background:var(--navy); }
.input-row { display:flex; gap:10px; }
.input-row input {
  min-height:50px;
  flex:1;
  border:1px solid var(--line);
  border-radius:8px;
  padding:0 16px;
  color:var(--ink);
  background:#fff;
  box-shadow:0 12px 28px rgba(16,24,39,.06);
}
.primary-button,.local-preview-button,.outline-button {
  min-height:46px;
  border:0;
  border-radius:8px;
  padding:0 18px;
  font-size:14px;
  font-weight:950;
}
.primary-button { color:#fff; background:linear-gradient(135deg,var(--blue),#6547ff); box-shadow:0 14px 28px rgba(47,109,246,.25); }
.local-preview-button { margin-top:14px; color:var(--blue); background:#fff; border:1px solid #cbd8ea; }
.auth-note,.form-message { color:var(--muted); font-size:12px; }
.device-name-field { margin:0 0 12px; }
.device-name-field input { width:100%; min-height:46px; padding:0 14px; border:1px solid var(--line); border-radius:8px; font:inherit; color:var(--ink); background:#fff; }
.device-replacement { margin-top:16px; padding:16px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.device-name-field[hidden],.device-replacement[hidden] { display:none; }
.device-replacement h2 { margin:0 0 6px; font-size:17px; color:var(--ink); }
.device-replacement p { margin:0 0 12px; color:var(--muted); font-size:13px; line-height:1.6; }
.device-options { display:grid; gap:6px; max-height:220px; overflow:auto; }
.device-option { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:6px; cursor:pointer; }
.device-option:has(input:checked) { border-color:var(--blue); background:#edf3ff; }
.device-option input { accent-color:var(--blue); }
.device-option span { display:grid; gap:3px; min-width:0; }
.device-option strong { font-size:14px; color:var(--ink); overflow-wrap:anywhere; }
.device-option small { font-size:12px; color:var(--muted); }
.device-actions { display:flex; gap:10px; margin-top:14px; }
.device-actions .cancel-button { min-height:46px; padding:0 18px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:#fff; cursor:pointer; }
.device-actions button:disabled { opacity:.6; cursor:wait; }

.app-shell { max-width:1520px; min-height:100vh; margin:auto; padding:0 clamp(18px,4vw,64px) 54px; }
.topbar { height:82px; display:flex; align-items:center; justify-content:space-between; }
.topbar-actions { display:flex; align-items:center; gap:12px; }
.help-button,.logout-button,.teacher-menu {
  min-height:38px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  background:#fff;
  color:var(--navy);
  font-weight:900;
}
.help-button { padding:0 14px; }
.logout-button { padding:0 13px; }
.teacher-menu { display:flex; align-items:center; gap:9px; padding:0 13px; }
.teacher-menu { text-decoration:none; }
.teacher-avatar { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; color:#fff; background:var(--red); }
.chevron { color:var(--muted); }

.welcome-row {
  position:relative;
  min-height:280px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:28px;
  padding:38px;
  border-radius:8px;
  color:#fff;
  background:#1c355d url("../assets/images/home/home-teacher-space-hero.png") center center / cover no-repeat;
  box-shadow:0 26px 70px rgba(16,24,39,.18);
  overflow:hidden;
}
.welcome-row::after { display:none; }
.welcome-row>div { position:relative; z-index:1; }
.eyebrow { margin:0 0 10px; color:#2772cf; font-size:11px; font-weight:950; letter-spacing:.16em; }
.welcome-row h1 { margin:0 0 10px; color:#fff !important; font-size:clamp(34px,4vw,58px); letter-spacing:0; text-shadow:0 3px 12px rgba(0,0,0,.22); }
.welcome-row p:not(.eyebrow) { margin:0; color:#111; font-family:"MiSans","HarmonyOS Sans SC","Microsoft YaHei",sans-serif; font-size:clamp(24px,2vw,31px); font-weight:900; line-height:1.35; text-shadow:0 1px 8px rgba(255,255,255,.72); }
.space-code {
  display:flex;
  align-items:center;
  gap:14px;
  justify-content:flex-end;
  margin-top:18px;
  padding:16px 0 0;
  border-top:1px solid rgba(17,26,46,.1);
}
.space-code span { color:#66758e; font-size:14px; font-weight:800; }
.space-code strong { color:#34425b; font-size:16px; letter-spacing:.1em; }
.space-code button { border:0; color:#1c5bcb; background:transparent; font-size:13px; font-weight:900; }

.category-tabs {
  display:flex;
  gap:12px;
  width:max-content;
  max-width:100%;
  margin:28px 0 0;
  padding:10px;
  overflow:auto;
  border:1px solid rgba(17,26,46,.1);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(241,246,252,.86));
  box-shadow:0 18px 34px rgba(16,24,39,.1), inset 0 1px 0 rgba(255,255,255,.9);
}
.tab {
  min-width:118px;
  min-height:54px;
  border:1px solid rgba(17,26,46,.08);
  border-radius:14px;
  padding:0 22px;
  color:var(--navy);
  background:linear-gradient(180deg,#fff,#edf4ff);
  font-size:16px;
  font-weight:950;
  white-space:nowrap;
  box-shadow:0 8px 0 rgba(16,24,39,.13),0 14px 24px rgba(16,24,39,.08);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.tab:hover { transform:translateY(-2px); box-shadow:0 10px 0 rgba(16,24,39,.13),0 18px 28px rgba(16,24,39,.12); }
.tab:active { transform:translateY(3px); box-shadow:0 4px 0 rgba(16,24,39,.14),0 8px 16px rgba(16,24,39,.1); }
.tab.is-active { color:#fff; background:linear-gradient(135deg,var(--navy),#263d70); border-color:rgba(255,255,255,.16); }
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin:38px 0 18px;
}
.section-heading .eyebrow { color:var(--blue); }
.section-heading h2 { margin:0; font-size:clamp(24px,2.4vw,36px); letter-spacing:0; }
.outline-button { color:var(--blue); background:#fff; border:1px solid #cbd8ea; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }

.game-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.game-card {
  position:relative;
  display:grid;
  grid-template-rows:150px auto;
  min-height:306px;
  color:inherit;
  border:1px solid rgba(17,26,46,.08);
  border-radius:8px;
  background:rgba(255,255,255,.9);
  text-decoration:none;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(16,24,39,.08);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.game-card:hover { transform:translateY(-5px); border-color:rgba(47,109,246,.35); box-shadow:0 22px 48px rgba(16,24,39,.15); }
.game-index {
  position:absolute;
  z-index:3;
  top:12px;
  left:12px;
  display:grid;
  place-items:center;
  width:50px;
  height:38px;
  border-radius:8px;
  color:#fff;
  background:linear-gradient(180deg,#ffd65d,#f4aa20);
  font-size:16px;
  font-weight:950;
  letter-spacing:.08em;
  box-shadow:0 4px 0 rgba(135,86,8,.25),0 8px 16px rgba(80,52,4,.18);
}
.game-cover { position:relative; display:block; min-height:150px; overflow:hidden; background:linear-gradient(135deg,#dce8fb,#fff); }
.game-cover img { width:100%; height:100%; min-height:150px; display:block; object-fit:cover; transform:scale(1.02); transition:transform .22s ease; }
.game-card:hover .game-cover img { transform:scale(1.08); }
.game-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(17,26,46,0), rgba(17,26,46,.24)); }
.game-cover b {
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:2;
  display:grid;
  place-items:center;
  min-width:42px;
  height:42px;
  padding:0 9px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:8px;
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--red));
  font-size:17px;
  font-weight:950;
  box-shadow:0 12px 20px rgba(16,24,39,.2);
}
.game-copy { display:block; padding:17px 18px 50px; }
.game-copy em {
  display:inline-grid;
  min-height:24px;
  place-items:center;
  padding:0 9px;
  border-radius:999px;
  color:#0f4ea8;
  background:#eaf2ff;
  font-size:11px;
  font-style:normal;
  font-weight:950;
}
.game-copy h3 { margin:10px 0 7px; font-size:20px; line-height:1.2; letter-spacing:0; }
.game-copy p { margin:0; color:var(--muted); font-size:13px; line-height:1.65; }
.game-arrow { position:absolute; right:16px; bottom:14px; color:var(--blue); font-size:13px; font-weight:950; }

.bottom-banner {
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:26px;
  padding:22px 24px;
  border:1px solid rgba(47,109,246,.14);
  border-radius:8px;
  background:linear-gradient(135deg,#ffffff,#edf5ff);
  box-shadow:0 14px 34px rgba(16,24,39,.07);
}
.banner-icon { display:grid; place-items:center; width:44px; height:44px; color:#fff; border-radius:8px; background:var(--blue); font-size:24px; font-weight:900; }
.bottom-banner strong { font-size:16px; }
.bottom-banner p { margin:4px 0 0; color:var(--muted); font-size:13px; }
.bottom-banner .primary-button { margin-left:auto; }
.bottom-banner .primary-button { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }

@media (max-width:1180px) {
  .game-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .auth-screen { grid-template-columns:1fr; padding:42px 28px; }
  .auth-art { width:min(78vw,420px); margin:auto; }
  .welcome-row,.section-heading,.bottom-banner { align-items:stretch; flex-direction:column; }
  .space-code { min-width:0; width:100%; }
  .game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px) {
  .input-row { flex-direction:column; }
  .app-shell { padding:0 14px 34px; }
  .topbar { height:70px; }
  .topbar .brand-mark { font-size:0; }
  .topbar .brand-mark span { font-size:12px; }
  .teacher-menu span:not(.teacher-avatar) { display:none; }
  .logout-button { display:inline-flex; align-items:center; padding:0 9px; font-size:12px; }
  .help-button { min-width:42px; padding:0 10px; font-size:0; }
  .help-button::before { content:"帮助"; font-size:12px; }
  .welcome-row { min-height:230px; padding:24px; }
  .category-tabs { width:100%; }
  .game-grid { grid-template-columns:1fr; }
  .game-card { min-height:286px; }
  .bottom-banner .primary-button { margin-left:0; }
}