/* ============================================================
   Sprint 3.D-4：学生档案详情面板样式
   - 桌面居中卡片、手机 90dvh 底部抽屉、iOS 安全区
   ============================================================ */
.profile-detail-panel { position: fixed; top:0; left:0; right:0; bottom:0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.profile-detail-panel.hidden { display: none; }
.pdp-mask { position: absolute; top:0; left:0; right:0; bottom:0; background: rgba(15, 23, 42, .55); backdrop-filter: blur(4px); }
.pdp-card {
  position: relative; z-index: 1;
  width: min(560px, calc(100vw - 32px));
  max-height: min(88vh, calc(100dvh - 40px));
  background: linear-gradient(180deg, #fff 0%, #f7fafc 100%);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: pdpFadeIn .18s ease-out;
}
@keyframes pdpFadeIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

.pdp-header {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px 14px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 60%, #fbbf24 100%);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  position: relative;
}
.pdp-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
}
.pdp-title-block { flex: 1; min-width: 0; }
.pdp-name { margin: 0; font-size: 20px; font-weight: 800; color: #1e293b; line-height: 1.2; word-break: break-all; }
.pdp-subtitle { margin-top: 4px; font-size: 13px; color: #64748b; }
.pdp-close {
  position: absolute; top: 12px; right: 12px;
  min-width: 36px; min-height: 36px; padding: 0;
  border: none; border-radius: 50%; background: rgba(255, 255, 255, .85);
  font-size: 16px; cursor: pointer; color: #64748b;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
.pdp-close:hover { background: #fff; color: #1e293b; }

.pdp-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 18px 20px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.pdp-section + .pdp-section { margin-top: 18px; }
.pdp-section h3 {
  margin: 0 0 10px; font-size: 13px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .5px;
}
.pdp-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin: 0;
}
.pdp-grid > div {
  background: #f1f5f9; border-radius: 12px; padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, .04);
}
.pdp-grid > div.highlight {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color: rgba(251, 191, 36, .3);
}
.pdp-grid dt {
  margin: 0; font-size: 11px; color: #64748b; font-weight: 600;
  text-transform: uppercase; letter-spacing: .3px;
}
.pdp-grid dd {
  margin: 4px 0 0; font-size: 15px; font-weight: 700; color: #1e293b;
  word-break: break-all;
}
.pdp-goal {
  margin: 0; padding: 12px 14px;
  background: #f1f5f9; border-radius: 12px;
  font-size: 14px; line-height: 1.6; color: #334155;
  white-space: pre-wrap; word-break: break-word;
}
.pdp-meta-grid {
  display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0;
}
.pdp-meta-grid > div {
  background: #f8fafc; border-radius: 10px; padding: 8px 12px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.pdp-meta-grid dt { margin: 0; font-size: 12px; color: #64748b; font-weight: 600; flex-shrink: 0; }
.pdp-meta-grid dd { margin: 0; font-size: 12px; color: #334155; text-align: right; }
.pdp-meta-grid dd.mono { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 11px; word-break: break-all; }

.pdp-footer {
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(0, 0, 0, .06);
  background: #fff;
  display: flex; gap: 10px;
  flex-shrink: 0;
}
.pdp-btn {
  flex: 1; min-height: 48px; padding: 0 16px;
  border: 1px solid #e2e8f0; border-radius: 12px;
  background: #f8fafc; color: #334155;
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: all .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.pdp-btn:hover { background: #f1f5f9; border-color: #cbd5e1; }
.pdp-btn-primary {
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 12px rgba(234, 88, 12, .35);
}
.pdp-btn-primary:hover { background: linear-gradient(135deg, #d97706 0%, #c2410c 100%); }
.pdp-btn-danger {
  background: #fef2f2; border-color: #fecaca; color: #b91c1c;
}
.pdp-btn-danger:hover { background: #fee2e2; border-color: #fca5a5; }

body.pdp-open { overflow: hidden; }

/* ============================================================
   HUD 上的档案 chip —— 桌面完整、手机紧凑
   ============================================================ */
.student-profile-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 6px;
  min-height: 32px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  border: none; border-radius: 999px;
  color: #78350f; font-weight: 700; font-size: 13px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, box-shadow .12s ease;
  max-width: 240px;
  box-shadow: 0 2px 6px rgba(234, 88, 12, .25);
}
.student-profile-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(234, 88, 12, .35); }
.student-profile-chip:active { transform: translateY(0); }
.student-profile-chip .avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.student-profile-chip > span:not(.avatar) {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; max-width: 180px;
}

/* ============================================================
   移动端适配：< 640px 抽屉从下弹起，占 90dvh，档案 chip 变小
   ============================================================ */
@media (max-width: 640px) {
  .profile-detail-panel { align-items: flex-end; }
  .pdp-card {
    width: 100vw;
    max-width: 100vw;
    max-height: 92dvh;
    border-radius: 20px 20px 0 0;
    animation: pdpSlideUp .22s ease-out;
  }
  @keyframes pdpSlideUp { from { transform: translateY(100%); } to { transform: none; } }
  .pdp-header { padding: 16px 16px 12px; padding-top: max(16px, env(safe-area-inset-top, 0px)); }
  .pdp-avatar { width: 48px; height: 48px; font-size: 28px; }
  .pdp-name { font-size: 18px; }
  .pdp-body { padding: 14px 16px; }
  .pdp-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .pdp-grid > div { padding: 8px 10px; }
  .pdp-grid dd { font-size: 14px; }
  .pdp-footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .pdp-btn { font-size: 14px; min-height: 46px; }

  .student-profile-chip {
    padding: 3px 10px 3px 4px;
    min-height: 30px;
    font-size: 12px;
    max-width: 160px;
  }
  .student-profile-chip .avatar { width: 22px; height: 22px; font-size: 14px; }
  .student-profile-chip > span:not(.avatar) { max-width: 110px; }
}

/* 超窄屏幕：chip 只保留头像+昵称，学段年级隐藏（可点开面板查看） */
@media (max-width: 380px) {
  .student-profile-chip { max-width: 130px; }
  .student-profile-chip > span:not(.avatar) { max-width: 80px; font-size: 11px; }
}

/* v6.2.15：加入班级 + 我的班级 + 反馈按钮 */
.pdp-classes { min-height: 40px; padding: 6px 0; color: #64748b; font-size: 14px; }
.pdp-class-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; margin: 6px 0;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: 10px; border-left: 4px solid #f59e0b;
}
.pdp-class-name { font-weight: 900; color: #7c2d12; font-size: 15px; }
.pdp-class-meta { color: #92400e; font-size: 12px; }
.pdp-join-row {
  display: flex; gap: 8px; margin-top: 10px;
}
.pdp-join-row input {
  flex: 1; min-width: 0;
  padding: 10px 14px; font-size: 16px; font-weight: 700;
  border: 2px solid #cbd5e1; border-radius: 10px;
  letter-spacing: 2px;
}
.pdp-join-row input:focus { border-color: #f59e0b; outline: none; }
.pdp-join-row .pdp-btn { white-space: nowrap; }
.pdp-join-hint {
  margin-top: 8px; font-size: 13px; min-height: 18px;
  padding: 0 4px;
}
.pdp-join-hint.ok { color: #16a34a; }
.pdp-join-hint.err { color: #dc2626; }

@media (max-width: 480px) {
  .pdp-join-row { flex-direction: column; }
  .pdp-join-row input { font-size: 18px; text-align: center; }
  .pdp-class-item { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* v6.2.20.2：学生 ID 复制按钮 + 复制 toast */
.pdp-hint {
  font-size: 11px; font-weight: 500; color: #94a3b8; margin-left: 2px;
}
.pdp-sid-row {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  min-width: 0;
}
.pdp-sid-text {
  user-select: all; -webkit-user-select: all;
  word-break: break-all;
  font-size: 13px;
}
.pdp-copy-btn {
  flex-shrink: 0;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.pdp-copy-btn:hover { background: #e0f2fe; border-color: #38bdf8; color: #0369a1; }
.pdp-copy-btn:active { transform: scale(0.96); }
.pdp-copy-btn.copied {
  background: #dcfce7; border-color: #22c55e; color: #15803d;
}
@media (max-width: 480px) {
  .pdp-copy-btn { padding: 4px 12px; font-size: 12px; }
}

.pdp-toast {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 20px);
  transform: translate(-50%, -20px);
  z-index: 2147483647;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #16a34a;
  box-shadow: 0 6px 20px rgba(22,163,74,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease-out, transform .18s ease-out;
  max-width: 90vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdp-toast.err { background: #dc2626; box-shadow: 0 6px 20px rgba(220,38,38,.35); }
.pdp-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* v6.2.21 Sprint 4：老师作业列表 */
.pdp-assignments { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.pdp-asg-item {
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
  padding: 10px 12px;
}
.pdp-asg-item.done { background: #ecfdf5; border-color: #86efac; }
.pdp-asg-title { font-weight: 700; color: #0f172a; font-size: 14px; }
.pdp-asg-meta { color: #64748b; font-size: 12px; margin: 4px 0 6px; }
.pdp-asg-bar {
  height: 6px; background: #e5e7eb; border-radius: 999px; overflow: hidden;
}
.pdp-asg-bar-fill {
  height: 100%; background: linear-gradient(90deg, #f59e0b, #f97316);
  transition: width .3s ease;
}
.pdp-asg-item.done .pdp-asg-bar-fill { background: linear-gradient(90deg, #10b981, #059669); }
.pdp-asg-progress { font-size: 12px; color: #475569; margin-top: 4px; font-weight: 600; }

/* ============ v6.2.21 Sprint 6: 作业答题模态 ============ */
.pdp-asg-action { margin-top: 8px; display: flex; justify-content: flex-end; }
.pdp-asg-btn {
  padding: 8px 16px; border: none; border-radius: 8px; font-weight: 700;
  font-size: 13px; cursor: pointer; transition: transform .1s, box-shadow .2s;
}
.pdp-asg-btn.play {
  background: linear-gradient(135deg, #f97316, #ef4444); color: #fff;
  box-shadow: 0 4px 12px rgba(249, 115, 22, .3);
}
.pdp-asg-btn.play:hover { transform: translateY(-1px); }
.pdp-asg-btn.play:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.pdp-asg-btn.done { background: #86efac; color: #14532d; cursor: default; }

.pdp-asg-play { position: fixed; top:0; left:0; right:0; bottom:0; z-index: 9999; }
.pdp-asg-play.hidden { display: none; }
.pdp-asg-mask { position: absolute; top:0; left:0; right:0; bottom:0; background: rgba(15, 23, 42, .65); backdrop-filter: blur(6px); }
.pdp-asg-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(92vw, 560px); max-height: 90vh; background: #fff;
  border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  display: flex; flex-direction: column; overflow: hidden;
}
.pdp-asg-head {
  padding: 12px 16px; border-bottom: 1px solid #e2e8f0;
  display: flex; align-items: center; gap: 12px; background: #f8fafc;
}
.pdp-asg-htitle { font-weight: 800; font-size: 15px; color: #0f172a; flex: 1; }
.pdp-asg-hprog { font-size: 12px; color: #475569; }
.pdp-asg-hprog b { color: #f97316; }
.pdp-asg-close {
  width: 32px; height: 32px; border: none; background: transparent;
  font-size: 18px; cursor: pointer; color: #64748b; border-radius: 6px;
}
.pdp-asg-close:hover { background: #f1f5f9; color: #0f172a; }
.pdp-asg-body { padding: 16px; overflow-y: auto; }
.pdp-asg-loading { text-align: center; color: #64748b; padding: 40px 20px; font-size: 14px; }
.pdp-asg-q.hidden, .pdp-asg-done.hidden, .pdp-asg-feedback.hidden { display: none; }
.pdp-asg-question {
  font-size: 17px; color: #0f172a; font-weight: 700;
  padding: 14px 16px; background: #fef3c7; border-radius: 10px;
  border-left: 4px solid #f59e0b; margin-bottom: 14px; line-height: 1.6;
}
.pdp-asg-options { display: flex; flex-direction: column; gap: 8px; }
.pdp-asg-opt {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: #fff; border: 2px solid #e2e8f0; border-radius: 10px;
  font-size: 14px; text-align: left; cursor: pointer; transition: all .15s;
  color: #0f172a; font-weight: 600;
}
.pdp-asg-opt:hover:not(:disabled) { border-color: #f97316; background: #fff7ed; }
.pdp-asg-opt:disabled { cursor: not-allowed; opacity: .85; }
.pdp-asg-opt.ok { border-color: #22c55e; background: #dcfce7; color: #14532d; }
.pdp-asg-opt.err { border-color: #ef4444; background: #fee2e2; color: #7f1d1d; }
.pdp-asg-opt-letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: #f97316;
  color: #fff; font-weight: 800; font-size: 13px; flex-shrink: 0;
}
.pdp-asg-opt.ok .pdp-asg-opt-letter { background: #22c55e; }
.pdp-asg-opt.err .pdp-asg-opt-letter { background: #ef4444; }
.pdp-asg-opt-text { flex: 1; }
.pdp-asg-feedback {
  margin-top: 12px; padding: 10px 12px; border-radius: 8px;
  font-weight: 700; font-size: 14px;
}
.pdp-asg-feedback.ok { background: #dcfce7; color: #14532d; border: 1px solid #86efac; }
.pdp-asg-feedback.err { background: #fee2e2; color: #7f1d1d; border: 1px solid #fca5a5; }
.pdp-asg-hint {
  margin-top: 8px; padding: 8px 12px; background: #fef3c7;
  border-radius: 8px; color: #78350f; font-size: 13px;
}
.pdp-asg-done { text-align: center; padding: 30px 20px; }
.pdp-asg-done-emoji { font-size: 56px; margin-bottom: 12px; }
.pdp-asg-done-title { font-size: 20px; font-weight: 800; color: #0f172a; margin-bottom: 12px; }
.pdp-asg-done-stat { font-size: 14px; color: #475569; margin-bottom: 20px; line-height: 1.8; }
.pdp-asg-done-stat b { color: #f97316; font-size: 16px; }
body.pdp-asg-open { overflow: hidden; }

@media (max-width: 480px) {
  .pdp-asg-card { width: 96vw; max-height: 92vh; }
  .pdp-asg-question { font-size: 16px; padding: 12px; }
  .pdp-asg-opt { padding: 10px 12px; font-size: 13px; }
}

/* Sprint 1 · 三星评级面板 */
.pdp-asg-stars {
  display: flex; justify-content: center; gap: 8px;
  font-size: 44px; margin-bottom: 4px; line-height: 1;
}
.pdp-asg-star {
  opacity: 0.35; transform: scale(0.7);
  transition: opacity .2s, transform .2s;
  filter: grayscale(1);
}
.pdp-asg-star.lit {
  opacity: 1; transform: scale(1); filter: none;
  animation: pdp-star-pop .6s cubic-bezier(.34,1.56,.64,1) both;
  text-shadow: 0 0 12px rgba(255, 200, 40, 0.85);
}
@keyframes pdp-star-pop {
  0%   { opacity: 0; transform: scale(0.2) rotate(-90deg); }
  60%  { opacity: 1; transform: scale(1.35) rotate(8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.pdp-asg-stars-label {
  font-size: 18px; font-weight: 800; color: #f59e0b;
  text-align: center; margin-bottom: 10px;
  letter-spacing: 2px;
}