/* Login overlay + user bar + teacher manage */
.login-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg-gradient);
  padding: 20px;
}
.login-box {
  width: min(400px, 92vw);
  background: var(--bg-panel);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  box-shadow: var(--shadow-dark);
}
.login-title {
  text-align: center; font-size: 1.4rem; font-weight: bold;
  background: var(--gold-gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}
.login-sub { text-align: center; color: var(--text-muted); font-size: 0.8rem; margin-bottom: 18px; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.auth-tab {
  flex: 1; padding: 9px; border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--text-secondary);
  border: 1px solid transparent; cursor: pointer; font-size: 0.9rem;
}
.auth-tab.active {
  background: var(--success-gradient); color: #fff; font-weight: bold;
  border-color: transparent;
}
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 4px; }
.field input, .field select {
  width: 100%; padding: 9px 10px; border-radius: var(--radius-sm);
  background: var(--bg-card); border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-primary); font-size: 0.9rem; outline: none;
}
.field input:focus { border-color: var(--gold); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip {
  padding: 5px 10px; border-radius: 20px; font-size: 0.78rem;
  background: var(--bg-card); color: var(--text-secondary);
  border: 1px solid rgba(255,255,255,0.1); cursor: pointer; user-select: none;
}
.chip.selected { background: var(--gold-gradient); color: #2a2a2a; font-weight: bold; border-color: transparent; }
.auth-msg { min-height: 18px; font-size: 0.78rem; margin: 2px 0 8px; }
.btn-primary {
  width: 100%; padding: 12px; border: none; border-radius: var(--radius-md);
  background: var(--gold-gradient); color: #2a2a2a; font-size: 1rem; font-weight: bold;
  cursor: pointer;
}
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-switch { text-align: center; margin-top: 12px; font-size: 0.8rem; color: var(--text-secondary); }
.auth-switch a { color: var(--gold); cursor: pointer; }

/* user bar */
.user-bar {
  position: absolute; top: 8px; right: 12px; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  background: rgba(42,42,90,0.7); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 30px; padding: 6px 14px;
  font-size: 0.82rem;
}
.user-bar .uname { font-weight: bold; }
.user-bar .urole { color: var(--gold); font-size: 0.75rem; }
.user-bar .upts { color: var(--success); font-weight: bold; }
.user-bar .btn-sm {
  border: 1px solid rgba(255,255,255,0.2); background: transparent; color: var(--text-primary);
  border-radius: 20px; padding: 3px 10px; font-size: 0.75rem; cursor: pointer;
}
.user-bar .btn-sm:hover { background: rgba(255,215,0,0.15); border-color: var(--gold); }

/* teacher manage overlay */
.teacher-overlay {
  position: fixed; inset: 0; z-index: 3000; background: rgba(15,15,26,0.7);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.teacher-modal {
  width: min(640px, 94vw); max-height: 85vh; display: flex; flex-direction: column;
  background: var(--bg-panel); border: 1px solid rgba(255,215,0,0.2);
  border-radius: var(--radius-lg); overflow: hidden;
}
.teacher-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.teacher-head h3 { margin: 0; font-size: 1.1rem; }
.teacher-close { background: transparent; border: none; color: var(--text-secondary); font-size: 1.3rem; cursor: pointer; }
.teacher-body { overflow-y: auto; padding: 16px 18px; }
.trow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg-card); border-radius: var(--radius-md);
  padding: 10px 12px; margin-bottom: 10px;
}
.tinfo { flex: 1; min-width: 0; }
.tname { font-weight: bold; font-size: 0.95rem; }
.twho { font-size: 0.75rem; color: var(--text-secondary); }
.tedit { display: flex; align-items: center; gap: 6px; flex: none; }
.tpts { width: 80px; padding: 6px; border-radius: var(--radius-sm); background: var(--bg-dark); border: 1px solid rgba(255,255,255,0.15); color: var(--text-primary); }
.tbtn {
  padding: 6px 10px; border: none; border-radius: var(--radius-sm);
  background: var(--gold-gradient); color: #2a2a2a; font-weight: bold; cursor: pointer; font-size: 0.78rem;
}
.class-selects { display: flex; gap: 8px; }
.class-selects select { flex: 1; padding: 9px 10px; border-radius: var(--radius-sm); background: var(--bg-dark); border: 1px solid rgba(255,255,255,0.15); color: var(--text-primary); font-size: 0.9rem; }

.hidden { display: none !important; }
.app-shell { display: block; }
.plan-actions .btn-new-plan, .bar-btn { }
/* ================= UI polish: field label / class picker / admin list / profile / login ================= */

/* shared field label / input / readonly row (admin form + profile) */
.flabel { display: block; font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 4px; }
.fin {
  width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: var(--radius-sm);
  background: var(--bg-dark); border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-primary); font-size: 0.9rem; outline: none;
}
.fin:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255,215,0,0.15); }
.fstatic {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px;
  border-radius: var(--radius-sm); background: var(--bg-dark);
  color: var(--text-muted); font-size: 0.9rem;
}
.pv-form { display: flex; flex-direction: column; gap: 10px; }

/* class picker: 6 grades x 8 classes */
.clsbar { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; }
.clsmini { font-size: 0.72rem; color: var(--text-secondary); }
.clsminibtn {
  border: 1px solid rgba(255,255,255,0.2); background: transparent; color: var(--text-secondary);
  border-radius: 12px; padding: 2px 10px; font-size: 0.7rem; cursor: pointer;
}
.clsminibtn:hover { color: var(--gold); border-color: var(--gold); }
.clsgrid {
  display: flex; flex-direction: column; gap: 4px; padding: 10px;
  border-radius: var(--radius-sm); background: var(--bg-dark);
  border: 1px solid rgba(255,255,255,0.12);
}
.clsrow { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.clsgrade { width: 48px; flex: none; font-size: 0.72rem; color: var(--text-secondary); }
.clscb {
  display: inline-flex; align-items: center; gap: 3px; font-size: 0.75rem;
  cursor: pointer; padding: 3px 7px; border-radius: 5px;
  background: rgba(255,255,255,0.06); border: 1px solid transparent;
  color: var(--text-secondary); user-select: none;
}
.clscb input { accent-color: var(--gold); margin: 0; cursor: pointer; }
.clscb:hover { background: rgba(255,215,0,0.12); color: var(--text-primary); }
.clscb:has(input:checked) { background: var(--gold-gradient); color: #2a2a2a; font-weight: bold; }
.clscb:has(input:checked) input { accent-color: #2a2a2a; }

/* admin list: avatar / role badge / danger button */
.adm-count { font-size: 0.75rem; color: var(--text-muted); margin: 0 2px 10px; }
.tavatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: bold; font-size: 0.95rem; color: #2a2a2a;
}
.av-admin { background: var(--gold-gradient); }
.av-teacher { background: linear-gradient(135deg, #4ECDC4, #44a08d); color: #fff; }
.av-student { background: linear-gradient(135deg, #6a6adf, #4a4a9f); color: #fff; }
.rbadge {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: 0.68rem; font-weight: normal; vertical-align: 1px;
}
.rb-admin { background: rgba(255,215,0,0.18); color: var(--gold); border: 1px solid rgba(255,215,0,0.4); }
.rb-teacher { background: rgba(78,205,196,0.15); color: var(--success); border: 1px solid rgba(78,205,196,0.35); }
.rb-student { background: rgba(106,106,223,0.2); color: #b9b9ff; border: 1px solid rgba(106,106,223,0.4); }
.tsys { font-size: 0.7rem; color: var(--text-muted); }
.tbtn-lg { padding: 10px 14px; font-size: 0.85rem; }
.tbtn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid rgba(255,255,255,0.2); font-weight: normal; }
.tbtn-ghost:hover { color: var(--gold); border-color: var(--gold); }
.tbtn-danger { background: rgba(255,68,68,0.15); color: var(--danger); border: 1px solid rgba(255,68,68,0.4); font-weight: normal; }
.tbtn-danger:hover { background: rgba(255,68,68,0.3); }

/* admin add-teacher form card */
.adm-form {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; margin-bottom: 6px;
  background: var(--bg-card); border: 1px solid rgba(255,215,0,0.18);
  border-radius: var(--radius-md);
}
.adm-form-title { font-weight: bold; color: var(--gold); font-size: 0.92rem; }
.adm-actions { display: flex; gap: 8px; }
#addUserBox:empty { display: none; }

/* admin modal: single scroll container + sticky header */
#adminManageOverlay .teacher-modal { overflow-y: auto; }
#adminManageOverlay .teacher-body { overflow: visible; }
#adminManageOverlay .teacher-head { position: sticky; top: 0; z-index: 5; background: var(--bg-panel); }

/* login page polish */
.login-overlay { background: radial-gradient(900px 460px at 50% -8%, rgba(255,215,0,0.10), transparent 62%), var(--bg-gradient); }
.login-box { width: min(420px, 92vw); padding: 30px 26px; }
.auth-tab { transition: background 0.15s, color 0.15s; }
.auth-tab.active { background: var(--gold-gradient); color: #2a2a2a; }
.auth-tab:not(.active):hover { background: rgba(255,215,0,0.12); color: var(--text-primary); }
.field input, .field select { padding: 10px 11px; background: var(--bg-dark); }
.field input:focus, .field select:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255,215,0,0.15); }
.btn-primary { padding: 13px; transition: filter 0.15s, transform 0.05s; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: translateY(1px); }
/* teacher panel: student draw-record rows */
.tedit-col { flex-direction: column; align-items: stretch; width: 92px; }
.tedit-col .tpts { width: 100%; box-sizing: border-box; }
.trec-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.trec-txt { font-size: 0.72rem; color: var(--text-secondary); }
.trec-del {
  flex: none; border: none; background: transparent; color: var(--text-muted);
  cursor: pointer; font-size: 0.72rem; padding: 1px 5px; border-radius: 4px;
}
.trec-del:hover { background: rgba(255,68,68,0.18); color: var(--danger); }
.tbtn-mini { padding: 5px 8px; font-size: 0.72rem; background: transparent; color: var(--text-secondary); border: 1px solid rgba(255,255,255,0.2); font-weight: normal; }
.tbtn-mini:hover { color: var(--danger); border-color: rgba(255,68,68,0.5); }
/* 抽奖记录：兑换状态 */
.trec-ex {
  flex: none; font-size: 0.68rem; padding: 1px 7px; border-radius: 10px; line-height: 1.5;
  border: 1px solid rgba(255,255,255,0.2); background: transparent; color: var(--text-muted); cursor: pointer;
}
.trec-ex:hover { color: var(--gold); border-color: var(--gold); }
.trec-ex.on { background: rgba(255,215,0,0.16); border-color: rgba(255,215,0,0.5); color: var(--gold); font-weight: bold; }
.trec-ex.on:hover { background: rgba(255,215,0,0.28); }
.h-ex {
  display: inline-block; margin-left: 6px; font-size: 0.62rem; padding: 0 6px; border-radius: 8px; vertical-align: middle;
  background: rgba(255,215,0,0.16); border: 1px solid rgba(255,215,0,0.5); color: var(--gold);
}

/* ── 抽奖系统新功能：奖品图片/详情、积分调整记录、留言墙 ── */
.pick-award-item{position:relative;}
.pick-award-main{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;}
.pick-award-main .pick-award-name{flex:0 1 auto;min-width:0;}
.pick-thumb{width:22px;height:22px;object-fit:cover;border-radius:4px;flex:none;}
.pick-info{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:0 2px;margin-left:4px;font-size:0.68rem;vertical-align:1px;}
.pick-info:hover{color:var(--gold);}
.tag-thumb{width:16px;height:16px;object-fit:cover;border-radius:3px;vertical-align:-3px;margin-right:3px;}
.tag-pd{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:0.7rem;padding:0 2px;}
.tag-pd:hover{color:var(--gold);}
.pd-wrap{display:flex;flex-direction:column;gap:8px;}
.pd-img{max-width:100%;max-height:200px;object-fit:contain;border-radius:var(--radius-sm);background:rgba(255,255,255,0.04);align-self:center;}
.pd-noimg{padding:26px 0;text-align:center;color:var(--text-muted);font-size:0.72rem;background:rgba(255,255,255,0.04);border-radius:var(--radius-sm);}
.pd-meta{display:flex;gap:12px;font-size:0.74rem;color:var(--text-secondary);justify-content:center;}
.pd-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.pd-status{font-size:0.7rem;color:var(--text-muted);text-align:center;min-height:14px;}
.pd-desc{width:100%;min-height:64px;resize:vertical;padding:8px;border-radius:var(--radius-sm);background:var(--bg-dark);border:1px solid rgba(255,255,255,0.15);color:var(--text-primary);font-size:0.76rem;font-family:inherit;}
.pd-desc-ro{font-size:0.76rem;color:var(--text-secondary);line-height:1.6;white-space:pre-wrap;background:rgba(255,255,255,0.04);padding:10px;border-radius:var(--radius-sm);}
.pd-actions{display:flex;justify-content:center;}
.pd-actions .tbtn-lg{width:100%;}
.tpts-now{font-size:0.72rem;color:var(--text-secondary);}
.tpts-now b{color:var(--gold);}
.tpts-row{display:flex;gap:4px;align-items:center;}
.tpts-row .tpts{width:52px;}
.tplog-list{margin-top:4px;max-height:96px;overflow-y:auto;}
.tplog-row{display:flex;align-items:center;gap:4px;font-size:0.66rem;color:var(--text-muted);padding:1px 0;}
.tplog-row.rev{opacity:.55;text-decoration:line-through;}
.tplog-txt{flex:1;}
.tplog-undo{background:none;border:none;color:var(--gold);cursor:pointer;font-size:0.68rem;padding:0 2px;white-space:nowrap;}
.tplog-empty{font-size:0.66rem;color:var(--text-muted);}
.wall-composer{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.wall-composer textarea{width:100%;min-height:56px;resize:vertical;padding:8px;border-radius:var(--radius-sm);background:var(--bg-dark);border:1px solid rgba(255,255,255,0.15);color:var(--text-primary);font-size:0.76rem;font-family:inherit;}
.wall-composer-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.wall-tip{font-size:0.64rem;color:var(--text-muted);}
.wall-head{display:flex;align-items:center;justify-content:space-between;font-size:0.7rem;color:var(--text-muted);margin:4px 0 6px;}
.wall-msg{padding:8px;border-radius:var(--radius-sm);background:rgba(255,255,255,0.04);margin-bottom:6px;}
.wall-msg.done{opacity:.6;}
.wall-meta{display:flex;align-items:center;gap:6px;font-size:0.7rem;color:var(--text-secondary);margin-bottom:3px;flex-wrap:wrap;}
.wall-cls{font-size:0.62rem;color:var(--text-muted);border:1px solid rgba(255,255,255,0.15);border-radius:3px;padding:0 3px;}
.wall-time{font-size:0.62rem;color:var(--text-muted);}
.wall-done{font-size:0.62rem;color:#8bc34a;}
.wall-text{font-size:0.76rem;color:var(--text-primary);line-height:1.5;white-space:pre-wrap;word-break:break-word;}
.wall-acts{display:flex;gap:6px;margin-top:5px;}
.wall-del{color:#ff6b6b;}
.wall-empty{text-align:center;color:var(--text-muted);font-size:0.72rem;padding:20px 0;}