/* ═══════════════════════════════════════════
   kid.css — 小学生风格皮肤（覆盖原暗色主题）
   放在所有原样式之后加载，靠顺序覆盖同优先级规则
   ═══════════════════════════════════════════ */

/* ── 1. 调色板亮色化 ── */
:root {
  --kid-ink: #3B3557;
  --kid-ink-soft: #6B6386;
  --kid-ink-dim: #8E86A6;
  --kid-line: rgba(120,110,170,.22);
  --gold: #FFC53D;
  --gold-dark: #FF9500;
  --success: #58D68D;
  --purple: #A98BFF;
  --danger: #FF6B6B;
  --danger-light: #FF8A8A;
  --bg-panel: #FFFFFF;
  --bg-card: #F4F1FF;
  --bg-dark: #3B3557;          /* 仅用于「金色按钮上的深色文字」 */
  --text-primary: #3B3557;
  --text-secondary: #6B6386;
  --text-muted: #8E86A6;
  --bg-gradient: linear-gradient(180deg,#CFEBFF 0%,#E9F5FF 45%,#FFF6E3 100%);
  --shadow-dark: 0 12px 34px rgba(120,110,170,.24);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 26px;
}

/* ── 2. 页面底色：天蓝渐变 + 白色圆点 ── */
body {
  color: var(--kid-ink);
  background:
    radial-gradient(rgba(255,255,255,.55) 1.6px, transparent 1.7px) 0 0 / 26px 26px,
    var(--bg-gradient);
}

/* ── 3. 登录 / 注册页 ── */
.login-overlay {
  background:
    linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.74) 100%),
    url('../../kid-bg.webp') center / cover no-repeat,
    var(--bg-gradient);
}
.login-box {
  background: #fff; border: 3px solid #FFDDA6; border-radius: 28px;
  box-shadow: 0 20px 48px rgba(120,110,170,.30);
}
.login-title {
  background: linear-gradient(135deg,#FF8A00,#FF5E9C);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.login-sub { color: var(--kid-ink-dim); font-weight: 600; }
.auth-tab {
  background: #F1EDFF; color: var(--kid-ink-soft);
  border: 2px solid transparent; border-radius: 12px; font-weight: 700;
}
.auth-tab.active { background: linear-gradient(135deg,#FFC53D,#FF9500); color: #3B3557; }
.auth-tab:not(.active):hover { background: #E7E0FF; color: var(--kid-ink); }
.field label, .flabel { color: var(--kid-ink-soft); font-weight: 700; }

/* ── 4. 输入控件统一亮色 ── */
.field input, .field select, .fin, .tpts, .clsgrid, .pd-desc, .pd-desc-ro,
.wall-composer textarea, .add-category-zone input, .add-category-zone select,
.save-modal-input, .modal-study-input, .prize-select, .pick-controls input,
.plan-prize-weight input, .class-selects select {
  background: #FFFFFF; color: var(--kid-ink); border: 2px solid var(--kid-line);
}
.field input::placeholder, .modal-study-input::placeholder,
.add-category-zone input::placeholder { color: #A79EBE; }
.add-category-zone select option, .field select option,
.prize-select option { background: #fff; color: var(--kid-ink); }
.fstatic { background: #F7F5FF; color: var(--kid-ink-dim); }

/* ── 5. 顶部用户栏 ── */
.user-bar {
  background: rgba(255,255,255,.92); border: 2px solid var(--kid-line);
  box-shadow: 0 6px 18px rgba(120,110,170,.18);
}
.user-bar .urole { color: #E07B00; }
.user-bar .upts { color: #2FA98C; }
.user-bar .btn-sm { border: 2px solid var(--kid-line); color: var(--kid-ink); background: #fff; }
.user-bar .btn-sm:hover { background: #FFF3D6; border-color: var(--gold-dark); }
/* 「回到首页」是 <a>，需去掉下划线并与按钮外观一致 */
.user-bar a.btn-sm { text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }

/* ── 6. 遮罩层（弹窗背景）─ 变浅，避免压抑 ── */
.teacher-overlay, .modal-overlay, .save-modal, .close-reminder,
.overlay.show { background: rgba(96,86,150,.42); }

/* ── 7. 教师/管理/资料/奖品/留言 弹窗 ── */
.teacher-modal { border: 3px solid #FFDDA6; border-radius: 26px; box-shadow: 0 20px 48px rgba(120,110,170,.28); }
.teacher-head { border-bottom: 2px solid var(--kid-line); }
.trow { border-radius: 16px; }
.adm-form { border: 2px solid #FFE39A; border-radius: 18px; }
.adm-form-title, .modal-title, .save-modal-title, .h-name,
.history-tab.active .h-count, .adm-form-title { color: #E07B00; }
.tbtn-ghost, .tbtn-mini, .clsminibtn, .trec-ex, .wall-cls { border: 2px solid var(--kid-line); color: var(--kid-ink-soft); }
.tbtn-ghost:hover, .clsminibtn:hover, .tbtn-mini:hover { color: #E07B00; border-color: var(--gold-dark); }
.tplog-undo, .pick-info:hover, .tag-pd:hover, .trec-ex:hover { color: #E07B00; }
.clscb { background: #F1EDFF; }
.clscb:hover { background: #FFF3D6; color: var(--kid-ink); }
.pd-img, .pd-noimg, .pd-desc-ro, .wall-msg { background: #F7F5FF; }
.pick-minus { background: rgba(255,107,107,.22); color: #E24A4A; }
.pick-minus:hover { background: rgba(255,107,107,.42); }
.tavatar { box-shadow: 0 2px 6px rgba(120,110,170,.25); }
.rbadge { font-weight: 700; }
.rb-admin { background: #FFF0C8; color: #E07B00; border-color: #FFD98A; }
.rb-student { background: #ECECFF; color: #5A5AD6; border-color: #C7C7F5; }
.trec-ex.on, .h-ex { background: #FFF0C8; color: #E07B00; border-color: #FFD98A; }

/* ── 8. 结果弹窗 / 保存弹窗 ── */
.modal-content, .save-modal-content, .close-reminder-content {
  background: #fff; border: 3px solid #FFD98A;
  box-shadow: 0 22px 54px rgba(120,110,170,.30);
}
.modal-prize { color: var(--kid-ink); }
.modal-study-group label { color: var(--kid-ink-dim); }
.save-modal-btn.cancel { background: #F1EDFF; color: var(--kid-ink); }
.reminder-btn:not(.primary) { background: #F1EDFF; color: var(--kid-ink); border: 2px solid var(--kid-line); }

/* ── 9. 转盘 ── */
.wheel-title {
  background: linear-gradient(135deg,#FF8A00,#FF5E9C);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 0 rgba(255,255,255,.5);
}
.current-plan-badge span { color: #E07B00; }
.wheel-border { background: #FFFFFF; }
.bulb { background: #FFE08A; box-shadow: 0 0 8px 2px rgba(255,190,60,.9); }
.center-btn:disabled { background: linear-gradient(135deg,#D8D2E8,#B9B2CC); }
.pointer::before { border-top-color: #FF5E7A; }

/* ── 10. 底部按钮栏 ── */
.bar-btn-text { color: var(--kid-ink); text-shadow: none; font-weight: 800; }
.btn-history .bar-btn-circle {
  background: linear-gradient(135deg,#8ED8FF,#5BA9E8);
  border: 3px solid #fff; box-shadow: 0 6px 18px rgba(91,169,232,.45);
}
.btn-history:hover .bar-btn-circle { border-color: #fff; box-shadow: 0 10px 26px rgba(91,169,232,.6); }
.count-badge { border: 2px solid #fff; }

/* ── 11. 设置面板（右侧抽屉）── */
.settings-panel {
  background: linear-gradient(180deg,#FFFFFF,#FBF7FF);
  border-left: 3px solid #FFDDA6; box-shadow: -12px 0 44px rgba(120,110,170,.28);
}
.settings-tabs { background: #FFFFFF; border-bottom: 2px solid var(--kid-line); }
.tab-btn { color: var(--kid-ink-soft); font-weight: 700; }
.tab-btn.active { color: #E07B00; }
.tab-btn:hover { color: var(--kid-ink); }
.settings-close { background: #F1EDFF; color: var(--kid-ink); }
.settings-close:hover { background: rgba(255,107,107,.24); }

/* 奖品库 / 分类 */
.product-item { background: #F1FBF8; border-radius: 14px; }
.product-item:hover { background: #E4F7F1; }
.product-emoji { background: #D8F3EA; }
.product-used-tag, .category-header .cat-count { background: #FFF3D6; color: #C67C00; }
.category-zone { border: 2px dashed var(--kid-line); background: #FBFAFF; }
.category-header { border-bottom: 1px solid var(--kid-line); }
.category-items .product-tag { background: #F1EDFF; }
.category-items .product-tag:hover { background: #E7E0FF; border-color: #FFD98A; }
.category-items .product-tag .tag-used, .product-tag .tag-price { color: #C67C00; }
.product-tag .tag-price { background: #FFF3D6; }
.category-empty { color: var(--kid-ink-dim); }
.add-category-zone { background: #FFFBEC; border: 2px dashed #FFE39A; }
.btn-add-with-cat { border-radius: 10px; }

/* ── 12. 方案 / 记录 页 ── */
.plans-section-title, .pick-header-title, .plan-prizes-title,
.cloud-status { color: var(--kid-ink-dim); }
.plan-chip { background: #F1EDFF; border: 2px solid var(--kid-line); }
.plan-chip:hover { background: #FFF3D6; border-color: #FFD98A; }
.plan-chip.active { background: #FFF0C8; border-color: var(--gold-dark); color: #E07B00; }
.plan-chip.active .plan-chip-count { color: #C67C00; }
.btn-new-plan { background: #F1EDFF; color: var(--kid-ink); border: 2px solid var(--kid-line); }
.btn-new-plan:hover { color: #E07B00; border-color: var(--gold-dark); }
.pick-award-item { background: #F7F5FF; border-radius: 14px; }
.pick-award-item:hover { background: #EFEAFF; }
.pick-award-item.selected { background: #FFF3D6; border-color: var(--gold-dark); }
.pick-award-item .check-mark { color: #E07B00; }
.pick-award-name { color: var(--kid-ink); }
.plan-prize-row { background: #FFFBEC; border-radius: 12px; }
.plan-prize-pct { color: #E07B00; }
.mode-btn { border: 2px solid var(--kid-line); color: var(--kid-ink); }
.mode-btn.active { background: #FFF0C8; border-color: var(--gold-dark); color: #E07B00; }
.prob-info { background: #FFF4E0; color: var(--kid-ink-soft); }
.divider { background: var(--kid-line); }

/* 记录页 */
.history-tab { background: #F7F5FF; border: 2px solid var(--kid-line); color: var(--kid-ink-soft); }
.history-tab.active { background: #FFF0C8; border-color: var(--gold-dark); color: #E07B00; }
.history-item { background: #F7F5FF; border-radius: 12px; }
.history-item .h-sid { color: #2FA98C; }
.overview-badge { background: #FFF0C8; border: 2px solid #FFD98A; color: #E07B00; }
.overview-bar-row { background: #F7F5FF; }
.overview-bar-row:hover { background: #EFEAFF; }
.overview-bar-name { color: var(--kid-ink); }
.overview-bar-track { background: #ECE7FA; }
.overview-empty, .history-empty, .empty-state { color: var(--kid-ink-dim); }
.stat-group-title { background: #FFF6DC; border-color: #FFE39A; }
.stat-row { background: #F7F5FF; border-left: 1px solid #FFE39A; }
.stat-row .s-name { color: var(--kid-ink-soft); }
.stat-total { background: #EEFBF7; color: var(--kid-ink-soft); border-color: #FFE39A; }
.stat-detail-row { background: #FBFAFF; border-bottom: 1px solid #F0ECFF; }
.stat-detail-row:hover { background: #F1EDFF; }
.stat-detail-row .d-name { color: var(--kid-ink); }
.stat-detail-row .d-id { color: #2FA98C; }

/* ── 13. 批量 / 撤销 提示 ── */
.batch-bar { background: #fff; border-top: 2px solid #FFE39A; }
.batch-btn.exit { background: #F1EDFF; color: var(--kid-ink); border: 2px solid var(--kid-line); }
.undo-toast { background: #fff; color: var(--kid-ink); border: 2px solid #FFE39A; box-shadow: 0 10px 30px rgba(120,110,170,.28); }
.undo-toast .undo-action { color: #E07B00; }
.card { background: #FBFAFF; }
.card:hover { background: #F1EDFF; }

/* ── 14. Toast ── */
.toast { background: #FFD44D; color: var(--kid-ink); border-radius: 16px; }

/* ── 15. 我的奖品 / 奖品详情新面板 ── */
.pick-award-item { box-shadow: 0 2px 8px rgba(120,110,170,.10); }
.wall-msg { border-radius: 14px; }


/* ═══ 11. 学生管理（教师端 · 班级切换版） ═══ */
#teacherManageOverlay .teacher-modal { width: min(1080px, 96vw); max-height: 90vh; }
.stutabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.stutab {
  padding: 9px 18px; border-radius: 20px; border: 2px solid var(--kid-line);
  background: #F7F5FF; color: var(--kid-ink-soft); font-size: 0.85rem; font-weight: 700;
  cursor: pointer; transition: all 0.15s;
}
.stutab:hover { color: #E07B00; border-color: var(--gold-dark); }
.stutab.active { background: linear-gradient(135deg, #FFC53D, #FF9500); color: #3B3557; border-color: transparent; }
.stutab .n { opacity: 0.75; }
.stutools { margin-bottom: 12px; }
/* 搜索框：与同面板其它输入框统一为亮色白底 + 淡紫描边（原先误用了暗色主题变量，显得突兀） */
.stu-search {
  width: 100%; box-sizing: border-box; padding: 11px 14px; border-radius: 14px;
  border: 2px solid var(--kid-line); background: #FFFFFF; color: var(--kid-ink);
  font-size: 0.9rem; outline: none; transition: border-color 0.15s, background 0.15s;
}
.stu-search::placeholder { color: #A79EBE; }
.stu-search:focus { border-color: var(--gold-dark); background: #FFFDF7; }
.stucards { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.stucard { background: #F7F5FF; border: 2px solid var(--kid-line); border-radius: 16px; padding: 12px 10px; text-align: center; }
.stucard .n { font-size: 1.35rem; font-weight: 900; color: #E07B00; line-height: 1.25; word-break: break-all; }
.stucard .l { font-size: 0.72rem; color: var(--kid-ink-soft); margin-top: 4px; }
.stutable { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.stutable th { font-size: 0.72rem; color: var(--kid-ink-soft); text-align: left; padding: 0 10px 4px; white-space: nowrap; }
.stutable td { background: #F7F5FF; padding: 12px 10px; font-size: 0.86rem; vertical-align: middle; }
.stutable tr td:first-child { border-radius: 14px 0 0 14px; }
.stutable tr td:last-child { border-radius: 0 14px 14px 0; }
.stutable .n { color: var(--kid-ink-soft); font-weight: 700; width: 34px; }
.stutable .acc { font-size: 0.7rem; color: var(--text-muted); }
.stutable .pts b { color: #E07B00; font-size: 1.05rem; }
.stutable .rowpts { display: flex; gap: 4px; align-items: center; }
.stutable .rowpts .tpts { width: 56px; }
.stutable .rowbtn { white-space: nowrap; }
.stu-detail { width: min(880px, 96vw); }
.stu-detail-sec { margin-bottom: 16px; }
.stu-detail-sec h4 { margin: 0 0 8px; font-size: 0.9rem; color: #E07B00; display: flex; align-items: center; gap: 8px; }
.stu-detail-sec .trec-row { padding: 5px 0; border-bottom: 1px dashed var(--kid-line); }
.stu-detail-sec .tplog-list { max-height: none; }
@media (max-width: 900px) {
  .stutable th, .stutable td { padding: 10px 8px; font-size: 0.8rem; }
  .stutable .rowpts .tpts { width: 46px; }
}

/* ═══ 12. 管理员端账号管理 / 编辑弹窗 ═══ */
/* ═══ 13. 学生管理工具栏：搜索框与批量按钮横排 ═══ */
.stutools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.stutools .stu-search { flex: 1 1 240px; width: auto; min-width: 180px; }
.stutools .tbtn { white-space: nowrap; }

#adminManageOverlay .teacher-modal { width: min(1080px, 96vw); max-height: 90vh; }
.stu-edit { width: min(680px, 96vw); }
.stu-edit-fields { display: grid; gap: 12px; margin-bottom: 12px; }
.stutable .rowbtn .tbtn { margin-right: 6px; }
.stutable .rowbtn .tbtn:last-child { margin-right: 0; }
.stutable .tsys { font-size: 0.78rem; color: var(--text-muted); }
.stutable .rbadge { font-size: 0.72rem; padding: 2px 10px; border-radius: 10px; }
.stutable .rb-admin { background: #FFE3E3; color: #C0392B; }
.stutable .rb-teacher { background: #E3F2FF; color: #1565C0; }
.stutable .rb-student { background: #E8F8E0; color: #2E7D32; }
.stu-edit .clsgrid, .stu-edit .clsbar { max-height: 320px; overflow: auto; }

/* ── 奖品编辑弹窗 ── */
#prodEditModal .save-modal-content { width: min(420px, 90vw); }
#prodEditModal .pe-label { font-size: .85rem; font-weight: 700; color: var(--kid-ink-soft); margin: 0 0 6px 2px; }
#prodEditModal .save-modal-input { margin-bottom: 14px; }
#prodEditModal .pe-select { appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #8B7EC8 50%), linear-gradient(135deg, #8B7EC8 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
#prodEditModal .pe-select option { background: #fff; color: var(--kid-ink); }