/* ═══════════════════════════════════════════
   kid-app.css — 小学生风格皮肤（小动物乐园 / 数学乐园 共用）
   覆盖原暗色主题；放在各自 style 之后加载
   ═══════════════════════════════════════════ */

:root {
  --kid-ink: #3B3557;
  --kid-ink-soft: #6B6386;
  --kid-ink-dim: #8E86A6;
  --kid-line: rgba(120,110,170,.22);
  --bg: #EAF6FF;
  --card-bg: #FFFFFF;
  --card-hover: #FFFDF5;
  --text: #3B3557;
  --text-dim: #8E86A6;
  --accent: #FFB300;
  --accent2: #4ECDC4;
  --accent3: #FF6B6B;
  --accent4: #A98BFF;
  --green: #58D68D;
  --red: #FF6B6B;
}

body {
  color: var(--kid-ink);
  background:
    radial-gradient(rgba(255,255,255,.55) 1.6px, transparent 1.7px) 0 0 / 26px 26px,
    linear-gradient(180deg,#CFEBFF 0%,#E9F5FF 45%,#FFF6E3 100%);
}
.bg-pattern { background: none; }

/* ── 按钮 ── */
.btn-primary { background: linear-gradient(135deg,#FFC53D,#FF9500); color: var(--kid-ink); }
.btn-primary:hover { box-shadow: 0 8px 22px rgba(255,149,0,.28); }
.btn-secondary { background: #F1EDFF; color: var(--kid-ink); border: 2px solid var(--kid-line); }
.btn-secondary:hover { background: #E7E0FF; }
.btn-outline { background: #fff; color: var(--kid-ink); border: 2px solid var(--kid-line); }
.btn-outline:hover { background: #F1EDFF; }
.btn-small, .btn-tiny { border-radius: 14px; }

/* ── 登录 / 注册 ── */
.pp-login {
  background: linear-gradient(rgba(255,255,255,.74), rgba(255,255,255,.82)),
              url('kid-bg.webp') center / cover no-repeat fixed;
}
.pp-login-card {
  background: #fff; border: 3px solid #FFDDA6; border-radius: 28px;
  box-shadow: 0 20px 48px rgba(120,110,170,.28);
}
.pp-login-card h1 {
  background: linear-gradient(135deg,#FF8A00,#FF5E9C);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.pp-login-sub, .pp-login-hint, .pp-login-back { color: var(--kid-ink-dim); }
.pp-login-error { color: #E24A4A; }

/* ── 输入控件 ── */
.pp-input, .pp-select, .pp-textarea, .cust-input, .qa-input, .pp-input-sm {
  background: #fff; border: 2px solid var(--kid-line); color: var(--kid-ink);
}
.pp-input::placeholder, .qa-input::placeholder { color: #A79EBE; }
.pp-input:focus, .pp-select:focus, .pp-textarea:focus,
.cust-input:focus, .qa-input:focus { border-color: #FF9E2C; }
.pp-select option { background: #fff; color: var(--kid-ink); }

/* ── 通用弹窗 ── */
.pp-modal-mask { background: rgba(96,86,150,.42); }
.pp-modal-card {
  background: #fff; border: 3px solid #FFDDA6; border-radius: 26px;
  box-shadow: 0 20px 48px rgba(120,110,170,.28);
}
.pp-modal-head { border-bottom: 2px solid var(--kid-line); }
.pp-modal-close { color: var(--kid-ink-dim); }
.pp-modal-close:hover { color: var(--kid-ink); background: #F1EDFF; }
.pp-empty, .pp-dim { color: var(--kid-ink-dim); }

/* ── 头部 / 顶部信息 ── */
.header { border-bottom: 2px solid var(--kid-line); }
.header-left h1, .panel-head h1 {
  background: linear-gradient(135deg,#FF8A00,#FF5E9C);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.user-badge { background: #fff; border: 2px solid var(--kid-line); box-shadow: 0 3px 10px rgba(120,110,170,.14); }
.stat-card { background: #fff; border: 2px solid var(--kid-line); border-radius: 16px; box-shadow: 0 4px 14px rgba(120,110,170,.12); }
.stat-num { color: #E07B00; }

/* ── 学科选择 ── */
.subject-chip { background: #fff; border: 2px solid var(--kid-line); color: var(--kid-ink); font-weight: 700; }
.subject-chip:hover { border-color: #4ECDC4; }
.subject-chip.active { background: linear-gradient(135deg,#4ECDC4,#35B2A8); color: #fff; border-color: transparent; }

/* ── 游戏场地 ── */
.playground { background: #EAF7FF; border: 3px dashed #BFE3F5; border-radius: 20px; }
.playground::before { display: none; }
.pet-sprite:hover { filter: brightness(1.05) drop-shadow(0 0 8px rgba(255,179,0,.6)); }
.pet-sprite .sprite-info { background: rgba(255,255,255,.94); border: 1px solid var(--kid-line); }
.pet-sprite .sprite-name { color: var(--kid-ink); }
.pet-sprite .sprite-emoji { filter: drop-shadow(0 2px 3px rgba(120,110,170,.35)); }
.sprite-stars .empty { color: rgba(60,50,90,.15); }
.empty-state { color: var(--kid-ink-dim); }
.avatar-option:hover { background: #F1EDFF; }
.avatar-option.selected { border-color: #FF9E2C; background: #FFF3D6; }

/* ── 答题弹层 ── */
.encounter-overlay, .setup-overlay, .settings-overlay { background: rgba(96,86,150,.5); }
.encounter-card, .train-card, .setup-card, .settings-panel {
  background: #fff; border: 3px solid #FFDDA6; border-radius: 26px;
  box-shadow: 0 20px 48px rgba(120,110,170,.28);
}
.option-btn { background: #fff; border: 2px solid var(--kid-line); color: var(--kid-ink); }
.option-btn:hover { border-color: #4ECDC4; background: #EAFBF9; }
.option-btn.correct { border-color: var(--green); background: #E7F9EE; color: #2E9E63; }
.option-btn.wrong { border-color: var(--red); background: #FFECEC; color: #D64545; }
.encounter-level { background: #FFF3D6; color: #C67C00; }
.encounter-subject { background: #EAFBF9; color: #2FA98C; }
.q-feedback.qf-bad { background: #FFF0F0; border-color: rgba(214,69,69,.4); }
.qf-answer { background: #F7F5FF; color: var(--kid-ink); }
.qf-title { color: #D64545; }
.merge-quiz-tip { background: #EAFBF9; color: #2FA98C; }
.merge-quiz-result.ok { background: #E7F9EE; }
.merge-quiz-result.bad { background: #FFECEC; }
.name-opt { background: #fff; border: 2px solid var(--kid-line); color: var(--kid-ink); }
.name-opt:hover, .name-opt.selected { border-color: #4ECDC4; background: #EAFBF9; }

/* ── 排行榜 ── */
.pp-board-row { background: #F7F5FF; }
.pp-board-row .stat.points { color: #E07B00; }
.pp-board-row.me { border-color: #FFD98A; background: #FFF7DF; }
.pp-board-me { background: #FFF7DF; border-color: #FFD98A; color: #E07B00; }
.pp-board-sub { color: var(--kid-ink-dim); }

/* ── 教师面板 ── */
.panel-head { border-bottom: 2px solid var(--kid-line); }
.panel-tab { background: #F1EDFF; border: 2px solid var(--kid-line); color: var(--kid-ink); }
.panel-tab:hover { border-color: #FFD98A; }
.panel-tab.active { background: linear-gradient(135deg,#FFC53D,#FF9500); color: #3B3557; border-color: transparent; }
.pp-card { background: #fff; border: 2px solid var(--kid-line); }
.pp-card .num, .pp-card .num.c2 { color: #E07B00; }
.pp-card .num.c3 { color: #D64545; }
.pp-table-wrap { border: 2px solid var(--kid-line); }
.pp-table th { background: #F4F1FF; color: var(--kid-ink-soft); }
.pp-table td { border-top: 1px solid var(--kid-line); }
.pp-table tr:hover td { background: #FBFAFF; }
.pp-table .pts { color: #E07B00; }
.subject-toolbar, .bank-filter { background: #fff; border: 2px solid var(--kid-line); }
.pp-switch .track { background: #DCD6EE; }
.pp-switch .track::after { background: #fff; box-shadow: 0 1px 3px rgba(120,110,170,.4); }
.q-badge { background: #F1EDFF; color: var(--kid-ink-soft); }
.q-badge.right { background: #E7F9EE; color: #2E9E63; }
.q-badge.t-choice { background: #EAFBF9; color: #2FA98C; }
.q-badge.t-fill { background: #FFF3D6; color: #C67C00; }
.q-badge.t-short { background: #F3E9FF; color: #8A5BD8; }
.q-badge.grade { background: #FFECEC; color: #D64545; }
.q-type-area { border-top: 1px dashed var(--kid-line); }
.set-section { background: #fff; border: 2px solid var(--kid-line); }
.set-inline label { color: var(--kid-ink); }
.set-bg-area { background: #F4F1FF; border: 2px solid var(--kid-line); }
.set-bg-placeholder { color: var(--kid-ink-dim); }
.set-pet-section { background: #FBFAFF; border: 1px solid var(--kid-line); }
.set-pet-header:hover { background: #F1EDFF; }
.set-pet-header.open { background: #F7F5FF; }
.set-pet-badge { background: #F1EDFF; color: var(--kid-ink-soft); }
.set-lv-slot { background: #F7F5FF; }
.set-preview-sm { background: #F1EDFF; }
.set-lv-upload-btn { background: #F1EDFF; border: 2px solid var(--kid-line); color: var(--kid-ink-soft); }
.set-lv-upload-btn:hover { background: #E7E0FF; color: var(--kid-ink); }
.set-reset-btn { border: 2px solid var(--kid-line); color: var(--kid-ink-soft); }
.set-reset-btn:hover { border-color: #FF9E2C; color: var(--kid-ink); }
.set-close { color: var(--kid-ink-dim); }
.set-close:hover { color: var(--kid-ink); background: #F1EDFF; }