/* Same Sweetie-16 palette, pixel frames, sprites and fonts as the original UI. */
.auth-gate { position:fixed; inset:0; z-index:1500; display:grid; place-items:center; padding:24px; background:var(--k); overflow:auto; }
.auth-card { width:min(100%,480px); padding:28px; margin:auto; }
.auth-card h1 { font-size:18px; color:var(--y); line-height:1.9; text-align:center; }
.auth-card h2,.auth-card > p { text-align:center; }
.auth-sprites { display:flex; justify-content:center; align-items:end; gap:32px; margin-bottom:20px; }
.auth-form { display:grid; gap:12px; margin-top:24px; }
.auth-form .input { width:100%; min-width:0; }
.auth-error { color:var(--o); min-height:26px; margin:0; font-size:14px; }
.auth-foot { font-size:13px; margin:24px 0 0; }
.cloud-status { font-size:12px; max-width:220px; }
.unit-filter { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:16px 0; }
.unit-filter select { width:auto; min-width:180px; max-width:100%; }
.vocab-source { color:var(--s); font-size:13px; margin:10px 0; }
.face.back { overflow-y:auto; }
.fc-cn { overflow-wrap:anywhere; }
.lboxes { flex-wrap:wrap; }
.list-pagination { display:flex; justify-content:center; gap:16px; align-items:center; margin:20px 0; }
@media(max-width:700px) {
  .auth-gate {padding:16px;} .auth-card {padding:20px;} .auth-card h1 {font-size:15px;}
  .cloud-status {max-width:130px; padding:6px; font-size:10px;} .cloud-status .spr {display:none;}
  .hud-tools {gap:4px;} .fc-cn {font-size:18px;}
}
@media(max-width:520px) {
  #hud .hud-chip.exam {display:none;}
  #hud .hud-who {display:none;}
  #hud .hud-player {flex:0 0 auto; min-width:0;}
  #hud .hud-tools {margin-left:auto; min-width:0;}
  #hud .cloud-status {max-width:116px; white-space:normal; line-height:1.3;}
  .unit-filter {gap:8px; margin:8px 0;}
  .unit-filter .dim {font-size:12px;}
  .fc-word {font-size:clamp(24px,7vw,40px); overflow-wrap:anywhere;}
}