:root {
  /* 主色：粉 + 紫 */
  --pink: #ff5c8a;
  --pink-2: #ff8fb1;
  --purple: #7b5cfa;
  --purple-2: #a78bfa;
  /* 强调：暖黄 + 青 + 绿 */
  --orange: #ffa51f;
  --orange-2: #ffc44d;
  --teal: #25c9c0;
  --teal-2: #6fe3db;
  --green: #2ecc8f;

  --ink: #2e2a5c;
  --ink-2: #6b6a8f;
  --ink-3: #9c9cb9;
  --line: #edeef7;
  --bg: #f5f6fe;
  --card: #ffffff;

  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 10px 30px rgba(90, 100, 170, 0.10);
  --shadow-sm: 0 4px 14px rgba(90, 100, 170, 0.08);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(240px 240px at 8% -4%, rgba(255, 92, 138, .14), transparent 70%),
    radial-gradient(260px 260px at 96% 2%, rgba(123, 92, 250, .13), transparent 70%),
    radial-gradient(220px 220px at 50% 100%, rgba(37, 201, 192, .10), transparent 70%);
}
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
a { color: var(--purple); text-decoration: none; }

.app { max-width: 1120px; margin: 0 auto; padding: 0 16px 120px; position: relative; z-index: 1; }

/* ============ 顶部栏 ============ */
.topbar { position: sticky; top: 0; z-index: 30; background: rgba(245, 246, 254, .88); backdrop-filter: blur(14px); }
.topbar-inner { max-width: 1120px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 10px; }
.logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 17px; color: var(--ink); }
.logo-mark {
  width: 38px; height: 38px; border-radius: 13px; flex: none;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff; display: grid; place-items: center; font-size: 19px;
  box-shadow: 0 8px 18px rgba(123, 92, 250, .30);
}
.topbar .spacer { flex: 1; }
.navbtn {
  border: none; background: transparent; color: var(--ink-2);
  padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600;
}
.navbtn:hover { background: #fff; }
.navbtn.active { background: linear-gradient(135deg, var(--pink), var(--purple)); color: #fff; box-shadow: 0 8px 18px rgba(123, 92, 250, .28); }

/* ============ 底部导航（手机） ============ */
.bottom-nav { display: none; }
@media (max-width: 720px) {
  .topbar .navbtn { display: none; }
  .bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: #fff; border-radius: 26px 26px 0 0;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 28px rgba(90, 100, 170, .13);
  }
  .bottom-nav button {
    flex: 1; border: none; background: transparent; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 600; color: var(--ink-3); padding: 5px 0;
  }
  .bottom-nav button .ic { font-size: 21px; line-height: 1; filter: grayscale(1); opacity: .55; }
  .bottom-nav button.on { color: var(--pink); }
  .bottom-nav button.on .ic { filter: none; opacity: 1; }
}

/* ============ 问候区 ============ */
.hello { padding: 14px 4px 16px; }
.hello .hi { font-size: 23px; font-weight: 800; letter-spacing: .3px; }
.hello .hi em { font-style: normal; color: var(--pink); }
.hello .sub { color: var(--ink-2); font-size: 14px; margin-top: 2px; }

/* ============ 搜索框 ============ */
.searchbar {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 999px; padding: 13px 18px;
  box-shadow: var(--shadow); margin-bottom: 16px;
}
.searchbar .s-ic { font-size: 16px; opacity: .6; }
.searchbar input {
  border: none; outline: none; background: transparent; flex: 1; min-width: 0;
  font-size: 15px; color: var(--ink);
}
.searchbar input::placeholder { color: var(--ink-3); }
.searchbar .s-clear {
  cursor: pointer; color: var(--ink-3); font-size: 13px; font-weight: 700;
  background: #f1f2fa; border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; flex: none;
}
.searchbar .s-clear:hover { background: #ffe4ec; color: var(--pink); }

/* ============ 卡片 ============ */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 16px; }
.card.tight { padding: 14px; }
.grid { display: grid; gap: 14px; }
.grid.students { grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
.grid.media { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }

/* 学生卡片（多彩渐变头） */
.stu-card { padding: 0; overflow: hidden; cursor: pointer; transition: transform .16s, box-shadow .16s; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.stu-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(90, 100, 170, .16); }
.stu-top {
  padding: 16px; display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; position: relative; overflow: hidden;
}
.stu-top::after {
  content: ''; position: absolute; right: -22px; top: -26px; width: 92px; height: 92px;
  border-radius: 50%; background: rgba(255, 255, 255, .18);
}
.stu-card.tone-0 { --c1: #ff5c8a; --c2: #ff9fbe; }
.stu-card.tone-1 { --c1: #ffa51f; --c2: #ffcb63; }
.stu-card.tone-2 { --c1: #7b5cfa; --c2: #a78bfa; }
.stu-card.tone-3 { --c1: #25c9c0; --c2: #74e6de; }
.stu-card.tone-4 { --c1: #ff7a59; --c2: #ffab8f; }
.stu-card.tone-5 { --c1: #4c9bff; --c2: #8cc2ff; }

.avatar {
  width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .26); color: #fff; font-weight: 800; font-size: 19px; flex: none;
  border: 2px solid rgba(255, 255, 255, .55);
}
.avatar.b { background: linear-gradient(135deg, #cfe0ff, #a8c1ff); color: #27408f; }
.stu-name { font-weight: 800; font-size: 17px; line-height: 1.3; }
.stu-sub { font-size: 12.5px; opacity: .92; }
.stu-stats { display: flex; gap: 6px; padding: 12px 12px 14px; }
.stu-stats > div {
  flex: 1; text-align: center; font-size: 11.5px; color: var(--ink-3);
  background: #f7f8fe; border-radius: 13px; padding: 7px 4px;
}
.stu-stats b { display: block; color: var(--ink); font-size: 15.5px; font-weight: 800; }

/* ============ 按钮 ============ */
.btn {
  border: none; background: #fff; color: var(--ink);
  padding: 11px 20px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow: var(--shadow-sm); transition: transform .12s, box-shadow .12s;
}
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(135deg, var(--pink), var(--pink-2)); color: #fff; box-shadow: 0 8px 20px rgba(255, 92, 138, .32); }
.btn.purple { background: linear-gradient(135deg, var(--purple), var(--purple-2)); color: #fff; box-shadow: 0 8px 20px rgba(123, 92, 250, .30); }
.btn.warm { background: linear-gradient(135deg, var(--orange), var(--orange-2)); color: #fff; box-shadow: 0 8px 20px rgba(255, 165, 31, .30); }
.btn.teal { background: linear-gradient(135deg, var(--teal), var(--teal-2)); color: #fff; box-shadow: 0 8px 20px rgba(37, 201, 192, .28); }
.btn.ghost { background: #f1f2fa; color: var(--ink-2); box-shadow: none; }
.btn.danger { background: #ffeff2; color: #e5484d; box-shadow: none; }
.btn.sm { padding: 7px 14px; font-size: 13px; border-radius: 999px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ============ 表单 ============ */
.field { margin-bottom: 14px; }
.label { font-size: 13px; color: var(--ink-2); margin-bottom: 7px; display: block; font-weight: 700; }
.input, .textarea, select.input {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 15px;
  background: #fbfbff; outline: none; transition: .15s;
}
.input:focus, .textarea:focus { border-color: var(--pink-2); background: #fff; box-shadow: 0 0 0 4px rgba(255, 92, 138, .10); }
.textarea { min-height: 92px; resize: vertical; line-height: 1.75; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 640px) {
  .row3 { grid-template-columns: 1fr; }
  .row2 { grid-template-columns: 1fr; }
}

/* ============ 标签 ============ */
.tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border-radius: 999px;
  background: #f2f3fb; color: var(--ink-2); font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1.5px solid transparent; transition: .15s;
}
.tag.on { background: linear-gradient(135deg, var(--pink), var(--pink-2)); color: #fff; border-color: transparent; box-shadow: 0 5px 14px rgba(255, 92, 138, .28); }
.tag.warn.on { background: linear-gradient(135deg, var(--orange), var(--orange-2)); box-shadow: 0 5px 14px rgba(255, 165, 31, .28); }
.tag.plain { cursor: default; background: #f2f3fb; color: var(--ink-2); }
.tag-wrap { display: flex; flex-wrap: wrap; gap: 8px; }

/* ============ 评分 ============ */
.score-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.score-item:last-child { border-bottom: none; }
.score-name { width: 100px; flex: none; font-size: 14px; font-weight: 600; }
.stars { display: flex; gap: 6px; }
.star {
  width: 30px; height: 30px; border-radius: 50%; border: none; background: #f1f2fa;
  cursor: pointer; display: grid; place-items: center; font-size: 13px; font-weight: 700;
  color: var(--ink-3); transition: .15s;
}
.star:hover { background: #ffe9d4; }
.star.on { background: linear-gradient(135deg, var(--orange), var(--orange-2)); color: #fff; box-shadow: 0 4px 12px rgba(255, 165, 31, .35); }
.score-tip { font-size: 12px; color: var(--ink-3); margin-left: auto; text-align: right; }

/* ============ 上传 ============ */
.drop {
  border: 2.5px dashed #dfe1f2; border-radius: 20px; padding: 22px; text-align: center;
  color: var(--ink-3); background: #fbfbff; cursor: pointer; font-size: 14px; font-weight: 600;
}
.drop:hover, .drop.over { border-color: var(--pink-2); background: #fff5f8; color: var(--pink); }
.media-item { border-radius: 18px; overflow: hidden; background: #f7f8fe; box-shadow: var(--shadow-sm); position: relative; }
.media-item.pick { box-shadow: 0 0 0 2.5px var(--orange), var(--shadow-sm); }
.media-item.note { box-shadow: 0 0 0 2.5px #e8b04a, var(--shadow-sm); }
.upload-badge {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(30, 34, 58, .72); color: #fff; font-size: 12px; font-weight: 700;
  padding: 5px 0; text-align: center; letter-spacing: .5px;
}
.upload-badge.err { background: rgba(200, 48, 48, .85); }
.media-thumb { position: relative; width: 100%; height: 100px; background: #eef0f9; display: grid; place-items: center; font-size: 28px; }
.media-thumb video, .media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-body { padding: 10px; }
.media-name { font-size: 12px; color: var(--ink-2); word-break: break-all; display: block; margin-bottom: 7px; }

/* ============ 时间轴 ============ */
.timeline { position: relative; padding-left: 20px; }
.timeline::before { content: ''; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--pink-2), var(--purple-2), var(--teal-2)); opacity: .35; }
.tl-item { position: relative; margin-bottom: 14px; }
.tl-item::before {
  content: ''; position: absolute; left: -19px; top: 18px; width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c1, var(--pink)), var(--c2, var(--pink-2)));
  border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(90, 100, 170, .18);
}
.tl-item.tone-0 { --c1: #ff5c8a; --c2: #ff9fbe; }
.tl-item.tone-1 { --c1: #ffa51f; --c2: #ffcb63; }
.tl-item.tone-2 { --c1: #7b5cfa; --c2: #a78bfa; }
.tl-item.tone-3 { --c1: #25c9c0; --c2: #74e6de; }
.tl-date { font-size: 12px; color: var(--ink-3); margin-bottom: 5px; font-weight: 600; }
.tl-card { background: #fff; border-radius: 18px; padding: 14px; box-shadow: var(--shadow-sm); cursor: pointer; }
.tl-title { font-weight: 700; margin-bottom: 4px; }
.tl-text { font-size: 13px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tl-meta { margin-top: 9px; display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.tl-meta span { background: #f5f6fe; padding: 3px 10px; border-radius: 999px; }

/* ============ Tabs ============ */
.tabs { display: flex; gap: 6px; background: #eceefb; padding: 5px; border-radius: 999px; margin-bottom: 16px; }
.tabs button { flex: 1; border: none; background: transparent; padding: 10px; border-radius: 999px; cursor: pointer; color: var(--ink-2); font-size: 14px; font-weight: 700; }
.tabs button.on { background: #fff; color: var(--pink); box-shadow: var(--shadow-sm); }

/* ============ 弹层 / 提示 ============ */
.modal-mask { position: fixed; inset: 0; background: rgba(46, 42, 92, .42); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 100; padding: 16px; }
.modal { background: #fff; border-radius: 26px; width: 100%; max-width: 520px; max-height: 88vh; overflow: auto; padding: 22px; box-shadow: 0 24px 60px rgba(46, 42, 92, .25); }
.modal h3 { margin: 0 0 16px; font-size: 18px; font-weight: 800; }
.toast { position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%); background: rgba(46, 42, 92, .94); color: #fff; padding: 12px 22px; border-radius: 999px; z-index: 200; font-size: 14px; font-weight: 600; box-shadow: 0 12px 30px rgba(46, 42, 92, .3); }
.empty { text-align: center; color: var(--ink-3); padding: 44px 20px; }
.empty .big { font-size: 46px; display: block; margin-bottom: 12px; }

.muted { color: var(--ink-3); font-size: 13px; }
.section-title { font-weight: 800; font-size: 15.5px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.section-title .ic {
  width: 30px; height: 30px; border-radius: 11px; display: grid; place-items: center; font-size: 15px; flex: none;
  background: linear-gradient(135deg, var(--pink), var(--pink-2)); color: #fff; box-shadow: 0 5px 14px rgba(255, 92, 138, .28);
}
.section-title.purple .ic { background: linear-gradient(135deg, var(--purple), var(--purple-2)); box-shadow: 0 5px 14px rgba(123, 92, 250, .28); }
.section-title.warm .ic { background: linear-gradient(135deg, var(--orange), var(--orange-2)); box-shadow: 0 5px 14px rgba(255, 165, 31, .28); }
.section-title.teal .ic { background: linear-gradient(135deg, var(--teal), var(--teal-2)); box-shadow: 0 5px 14px rgba(37, 201, 192, .28); }
.hr { height: 1px; background: var(--line); margin: 16px 0; }
/* ★ 2026-10-08：「可查看」以前是个圆角胶囊，手机上看着像按钮但点不动 —— 改成低调的状态角标，
   一眼就知道是"状态"不是"按钮"，真正能点的操作都在下面那排按钮里。 */
.pill { display: inline-block; padding: 3px 10px; border-radius: 8px; background: linear-gradient(135deg, #fff0f5, #ffe6ee); color: var(--pink); font-size: 11.5px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; }
.pill.grey { background: #f1f2fa; color: var(--ink-3); }
.pill::before { content: '· '; opacity: .75; }
.flex { display: flex; align-items: center; gap: 10px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wrap { flex-wrap: wrap; }

/* 学生详情渐变头 */
.profile {
  border-radius: var(--radius); padding: 18px; color: #fff; margin-bottom: 16px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  box-shadow: 0 14px 34px rgba(123, 92, 250, .28);
}
.profile::after { content: ''; position: absolute; right: -30px; top: -34px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.profile .p-name { font-size: 21px; font-weight: 800; }
.profile .p-meta { font-size: 13px; opacity: .95; }
.profile .p-stats { display: flex; gap: 8px; margin-top: 14px; position: relative; z-index: 1; }
.profile .p-stats > div { flex: 1; background: rgba(255, 255, 255, .18); border-radius: 14px; padding: 8px 6px; text-align: center; font-size: 11.5px; }
.profile .p-stats b { display: block; font-size: 16px; font-weight: 800; }
.profile .p-tag { display: inline-block; background: rgba(255, 255, 255, .22); border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 700; margin-top: 8px; }

/* ============ 家长端 H5 ============ */
.p-wrap { max-width: 720px; margin: 0 auto; padding: 16px 14px 60px; position: relative; z-index: 1; }
.p-hero {
  border-radius: 28px; padding: 22px 20px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%);
  box-shadow: 0 16px 38px rgba(123, 92, 250, .30);
}
.p-hero::before { content: ''; position: absolute; right: -40px; top: -50px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255, 255, 255, .15); }
.p-hero::after { content: ''; position: absolute; left: -30px; bottom: -60px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255, 255, 255, .10); }
.p-hero-inner { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.p-ava {
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: rgba(255, 255, 255, .24); border: 3px solid rgba(255, 255, 255, .6);
  font-size: 24px; font-weight: 800;
}
.p-hero .p-name { font-size: 21px; font-weight: 800; line-height: 1.3; }
.p-hero .p-sub { font-size: 12.5px; opacity: .92; }
.p-hero .p-stats { display: flex; gap: 8px; margin-top: 16px; position: relative; z-index: 1; }
.p-hero .p-stats > div { flex: 1; background: rgba(255, 255, 255, .18); border-radius: 16px; padding: 9px 4px; text-align: center; }
.p-hero .p-stats > div b { display: block; font-size: 19px; font-weight: 800; }
.p-hero .p-stats > div span { font-size: 11.5px; opacity: .9; }

.p-card { background: #fff; border-radius: 24px; padding: 18px; margin-top: 14px; box-shadow: var(--shadow); }
.p-card h4 { margin: 0 0 12px; font-size: 15.5px; font-weight: 800; display: flex; align-items: center; gap: 9px; }
.p-card h4 .ic {
  width: 32px; height: 32px; border-radius: 12px; display: grid; place-items: center; font-size: 16px; flex: none;
  background: linear-gradient(135deg, var(--pink), var(--pink-2)); box-shadow: 0 6px 16px rgba(255, 92, 138, .26);
}
.p-card h4 .ic.purple { background: linear-gradient(135deg, var(--purple), var(--purple-2)); box-shadow: 0 6px 16px rgba(123, 92, 250, .26); }
.p-card h4 .ic.warm { background: linear-gradient(135deg, var(--orange), var(--orange-2)); box-shadow: 0 6px 16px rgba(255, 165, 31, .26); }
.p-card h4 .ic.teal { background: linear-gradient(135deg, var(--teal), var(--teal-2)); box-shadow: 0 6px 16px rgba(37, 201, 192, .26); }
.p-video { width: 100%; border-radius: 18px; background: #000; margin-bottom: 10px; display: block; box-shadow: var(--shadow-sm); }
.p-img { width: 100%; border-radius: 18px; display: block; box-shadow: var(--shadow-sm); }
.p-text { white-space: pre-wrap; font-size: 15px; line-height: 1.9; color: #453f6d; }
.p-remark { background: #fbeeff; border-radius: 18px; padding: 14px 16px; border-left: 5px solid var(--purple); }
.p-remark.pink { background: #fff1f5; border-left-color: var(--pink); }
.p-remark.warm { background: #fff8ec; border-left-color: var(--orange); }
.p-remark.teal { background: #ecfdfb; border-left-color: var(--teal); }
.p-list { margin: 0; padding-left: 0; list-style: none; font-size: 15px; line-height: 1.85; }
.p-list li { display: flex; gap: 10px; margin-bottom: 10px; }
.p-list li .dot {
  width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #fff; margin-top: 3px;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
}
.p-foot { text-align: center; color: var(--ink-3); font-size: 12px; margin-top: 26px; line-height: 1.9; }
.dimbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dimbar .n { width: 72px; font-size: 13px; color: var(--ink-2); flex: none; font-weight: 600; }
.dimbar .bar { flex: 1; height: 9px; background: #f0f1fa; border-radius: 99px; overflow: hidden; }
.dimbar .bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--purple-2), var(--purple)); }
.dimbar .v { width: 36px; text-align: right; font-size: 13px; font-weight: 800; color: var(--purple); }
.hist-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line); color: inherit; }
.hist-item:last-child { border-bottom: none; }
.hist-item .h-ic { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; font-size: 18px; flex: none; background: #f2f3fb; }

@media (max-width: 640px) {
  .hello .hi { font-size: 20px; }
  .p-hero { padding: 18px; border-radius: 24px; }
}

/* ================= 家长端 v2：米白 + 浅绿清爽风 ================= */
.p-wrap { background: #f7f8f5; min-height: 100vh; padding-bottom: 96px; }
.pr-profile { background: #f1efe8; border-radius: 26px; padding: 24px 18px 18px; text-align: center; margin-top: 6px; }
.pr-ring { position: relative; width: 116px; height: 116px; margin: 0 auto; }
.pr-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pr-avatar {
  position: absolute; left: 14px; top: 14px; width: 88px; height: 88px; border-radius: 50%;
  background: #fff; display: grid; place-items: center; font-size: 34px; font-weight: 700; color: #639922;
  overflow: hidden; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(60, 70, 50, .12);
}
.pr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pr-name { font-size: 21px; font-weight: 800; color: #2c2c2a; margin-top: 12px; }
.pr-sub { font-size: 12.5px; color: #5f5e5a; margin-top: 2px; }
.pr-caps { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.pr-caps span { background: #fff; border: 1px solid #e4e2d9; border-radius: 999px; padding: 5px 13px; font-size: 12.5px; color: #5f5e5a; font-weight: 600; }
.pr-caps b { color: #27500a; }

.pr-lesson {
  background: linear-gradient(135deg, #eaf3de, #f0f6e6); border-radius: 24px; margin-top: 14px;
  padding: 18px; display: flex; align-items: center; gap: 12px; overflow: hidden;
}
.pr-lesson .txt { flex: 1; min-width: 0; }
.pr-lesson h2 { margin: 0 0 8px; font-size: 16.5px; font-weight: 800; color: #27500a; line-height: 1.4; }
.pr-lesson .line { font-size: 12.5px; color: #3b6d11; line-height: 1.9; }
.pr-lesson .caps { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.pr-lesson .caps span { background: #fff; border: 1px solid #cfe3ae; border-radius: 999px; padding: 4px 11px; font-size: 12px; color: #3b6d11; font-weight: 600; }
.pr-illus { width: 96px; flex: none; }

.pr-card { background: #fff; border-radius: 22px; padding: 18px; margin-top: 14px; box-shadow: 0 6px 20px rgba(60, 70, 50, .06); }
.pr-card.mint { background: #f1efe8; }
.pr-card h4 { margin: 0 0 14px; font-size: 14.5px; font-weight: 800; color: #444441; display: flex; align-items: center; gap: 8px; }
.pr-card h4::before { content: ''; width: 4px; height: 15px; border-radius: 3px; background: #639922; }

.pr-words { display: flex; gap: 12px; align-items: flex-start; }
.pr-teacher-ava {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: #eaf3de; color: #3b6d11; font-weight: 800; font-size: 16px; overflow: hidden;
}
.pr-teacher-ava img { width: 100%; height: 100%; object-fit: cover; }
.pr-words .body { flex: 1; min-width: 0; }
.pr-words .who { font-size: 13px; font-weight: 700; color: #2c2c2a; margin-bottom: 6px; }
.pr-text { white-space: pre-wrap; font-size: 15px; line-height: 1.95; color: #3d3d38; }
.pr-remark { background: #f7f8f5; border-radius: 16px; padding: 13px 15px; border-left: 4px solid #97c459; margin-top: 12px; }
.pr-list { margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.9; color: #3d3d38; }
.pr-list li { display: flex; gap: 10px; margin-bottom: 9px; }
.pr-list li .dot {
  width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #fff; background: #639922; margin-top: 4px;
}
.pr-vid { background: #f7f8f5; border-radius: 18px; padding: 10px; margin-bottom: 12px; }
.pr-vid:last-child { margin-bottom: 0; }
.pr-vid video, .pr-vid audio { width: 100%; border-radius: 13px; display: block; background: #000; }
.pr-vid .cap { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: #5f5e5a; margin-top: 8px; }
.pr-vid .cap .t { font-weight: 600; color: #2c2c2a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-imgs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pr-imgs img { width: 100%; border-radius: 14px; display: block; }
.pr-hist a { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px dashed #e4e2d9; color: inherit; }
.pr-hist a:last-child { border-bottom: none; }
.pr-hist .hi { width: 38px; height: 38px; border-radius: 12px; background: #f1efe8; display: grid; place-items: center; font-size: 16px; flex: none; }
.pr-foot { text-align: center; color: #8a897f; font-size: 12px; margin-top: 22px; line-height: 1.9; }

.pr-sharebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #fff;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 22px rgba(60, 70, 50, .10); display: flex; gap: 10px;
}
.pr-sharebar .btn { flex: 1; }
.pr-sharebar .btn.green { background: #639922; color: #fff; box-shadow: 0 8px 18px rgba(99, 153, 34, .28); }
.pr-mask { position: fixed; inset: 0; background: rgba(44, 44, 42, .5); display: grid; place-items: center; z-index: 120; padding: 18px; }
.pr-mask-in { background: #fff; border-radius: 22px; padding: 18px; width: 100%; max-width: 400px; max-height: 86vh; overflow: auto; text-align: center; }
.pr-mask-in img { width: 100%; border-radius: 14px; display: block; }
.pr-mask-in .tip { font-size: 12.5px; color: #5f5e5a; margin-top: 12px; line-height: 1.8; }

/* ================= 家长端最终配色：白卡 + 深蓝紫 + 橙黄 ================= */
body.parent-page::before { display: none; }
.p-wrap { background: #edeef2; position: relative; padding-bottom: 100px; }
.p-wrap::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background:
    radial-gradient(circle at 9% 4%, #4ecdc4 0 13px, transparent 14px),
    radial-gradient(circle at 89% 7%, #4ecdc4 0 19px, transparent 20px),
    radial-gradient(circle at 20% 12%, #ff6b9d 0 9px, transparent 10px),
    radial-gradient(circle at 78% 14%, #7b7fe8 0 7px, transparent 8px),
    radial-gradient(circle at 5% 20%, #ffd166 0 15px, transparent 16px),
    radial-gradient(circle at 94% 22%, #f5a623 0 11px, transparent 12px),
    radial-gradient(circle at 84% 40%, #ff6b9d 0 6px, transparent 7px);
}
.p-wrap > * { position: relative; z-index: 1; }

.pr-profile { background: #fff; border-radius: 28px; padding: 26px 18px 18px; box-shadow: 0 10px 28px rgba(51, 58, 86, .08); }
.pr-ring svg .ring-bg { stroke: #ececf1; }
.pr-ring svg .ring-fg { stroke: #f5a623; }
.pr-name { color: #333a56; font-size: 25px; letter-spacing: .5px; }
.pr-sub { color: #9b9eb2; font-size: 14px; }

/* 数据三列（白卡 + 竖分隔） */
.pr-stats { display: flex; background: #fff; border-radius: 22px; padding: 16px 6px; margin-top: 14px; box-shadow: 0 8px 22px rgba(51, 58, 86, .07); }
.pr-stats > div { flex: 1; text-align: center; position: relative; }
.pr-stats > div + div::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 30px; background: #ececf1; }
.pr-stats b { display: block; font-size: 23px; font-weight: 800; color: #333a56; line-height: 1.3; }
.pr-stats span { font-size: 13.5px; color: #9b9eb2; }
.pr-caps { display: none; }

/* 本次课程卡 */
.pr-lesson { background: #fff; border-radius: 26px; padding: 20px; box-shadow: 0 10px 28px rgba(51, 58, 86, .08); gap: 14px; }
.pr-lesson h2 { color: #333a56; font-size: 19px; font-weight: 800; }
.pr-lesson .line { color: #8a8ea6; font-size: 14px; line-height: 2; }
.pr-lesson .caps span { background: #fff6e6; border: 1px solid #ffe2b8; color: #c97a00; font-size: 13.5px; font-weight: 700; padding: 5px 13px; }

/* 卡片 */
.pr-card { border-radius: 24px; box-shadow: 0 8px 22px rgba(51, 58, 86, .07); padding: 20px; }
.pr-card.mint { background: #fff; }
.pr-card h4 { color: #333a56; font-size: 17px; font-weight: 800; gap: 9px; }
.pr-card h4::before { width: 5px; height: 18px; background: #f5a623; border-radius: 3px; }
.pr-text { color: #4a4f68; font-size: 17px; line-height: 2; }
.pr-remark { background: #f6f7fb; border-left: 4px solid #f5a623; border-radius: 14px; font-size: 16.5px; color: #4a4f68; }
.pr-list { font-size: 17px; color: #4a4f68; }
.pr-list li .dot { background: #f5a623; width: 24px; height: 24px; font-size: 13px; }
.pr-teacher-ava { background: #fff4e3; color: #c97a00; width: 44px; height: 44px; font-size: 18px; }
.pr-words .who { color: #333a56; font-size: 15px; }
.pr-vid { background: #f6f7fb; border-radius: 18px; }
.pr-vid .cap { font-size: 13.5px; }
.pr-vid .cap .t { color: #333a56; font-size: 14.5px; }
.pr-hist .hi { background: #f6f7fb; }
.pr-hist a { font-size: 16px; }
.pr-foot { color: #9b9eb2; font-size: 13.5px; }

/* 分享给家人（二维码） */
.pr-share { text-align: center; }
.pr-share .qr-box { background: #fff; border-radius: 18px; padding: 10px; display: inline-block; margin-top: 6px; box-shadow: 0 6px 18px rgba(51, 58, 86, .06); }
.pr-share img, .pr-share canvas { display: block; width: 168px; height: 168px; }
.pr-share .lk { font-size: 13px; color: #9b9eb2; word-break: break-all; margin-top: 10px; line-height: 1.7; }

/* 吸底按钮 */
.pr-sharebar { box-shadow: 0 -8px 24px rgba(51, 58, 86, .1); }
.pr-sharebar .btn { font-size: 15px; padding: 13px 18px; }
.pr-sharebar .btn.green { background: linear-gradient(135deg, #f5a623, #ffc44d); color: #fff; box-shadow: 0 10px 22px rgba(245, 166, 35, .32); }

/* 开屏寄语 */
.splash {
  position: fixed; inset: 0; z-index: 300; overflow: hidden; cursor: pointer;
  background: linear-gradient(160deg, #43497a 0%, #333a56 46%, #4a3f63 100%);
  display: grid; place-items: center; padding: 36px; animation: spIn .45s ease both;
}
.splash.out { animation: spOut .4s ease both; }
@keyframes spIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes spOut { to { opacity: 0; transform: scale(1.05) } }
.sp-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(320px 320px at 18% 18%, rgba(245, 166, 35, .30), transparent 70%),
    radial-gradient(340px 340px at 84% 78%, rgba(78, 205, 196, .22), transparent 70%),
    radial-gradient(260px 260px at 70% 12%, rgba(255, 107, 157, .16), transparent 70%);
}
.sp-inner { position: relative; text-align: center; animation: spUp .8s .1s ease both; }
@keyframes spUp { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: none } }
.sp-img { width: 210px; border-radius: 22px; margin-bottom: 26px; box-shadow: 0 20px 44px rgba(0, 0, 0, .28); }
.sp-quote { color: #fff; font-size: 22px; line-height: 2; font-weight: 600; max-width: 580px; margin: 0 auto; letter-spacing: .5px; }
.sp-author { color: rgba(255, 255, 255, .75); font-size: 15px; margin-top: 16px; }
.sp-skip {
  position: absolute; right: 20px; bottom: 28px; color: rgba(255, 255, 255, .92); font-size: 14px;
  background: rgba(255, 255, 255, .16); border-radius: 999px; padding: 9px 18px; backdrop-filter: blur(6px);
}
.sp-skip b { font-size: 15px; }

/* 练琴打卡 */
.ck-calendar { display: flex; gap: 6px; margin-top: 16px; overflow-x: auto; padding-bottom: 6px; }
.ck-day { flex: none; width: 36px; text-align: center; }
.ck-day i { display: block; width: 30px; height: 30px; border-radius: 10px; background: #f4f5fa; margin: 0 auto 5px; }
.ck-day.on i { background: linear-gradient(135deg, #f5a623, #ffc44d); box-shadow: 0 5px 12px rgba(245, 166, 35, .35); }
.ck-day span { font-size: 12px; color: #9b9eb2; }
.ck-mins, .ck-pieces { display: flex; flex-wrap: wrap; gap: 9px; }
.ck-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.ck-photos img, .ck-photos video { width: 100%; height: 72px; object-fit: cover; border-radius: 12px; background: #ececf1; }

/* 家长端图表配色 */
.dimbar .bar i { background: linear-gradient(90deg, #ffc44d, #f5a623); }
.dimbar .v { color: #c97a00; }
.dimbar .n { color: #6b7089; font-size: 14px; }