/* ============================================================
 * 成长档案 · 设计系统 v4
 * ------------------------------------------------------------
 * 视觉口径对齐快乐宝贝主站（happy999）：
 *  - 壁纸铺底（bz11.jpg），侧边栏 15% 白 + 毛玻璃
 *  - 右侧内容区 20% 白毛玻璃、大圆角，内部卡片半透白
 *  - 全站图标改为图片（路径全部来自 site-config.js）
 * 主题：
 *  - 主页问候卡按性别切换：女孩玫瑰粉 / 男孩淡蓝
 *  - 记录类图标从 image/1（1~20.png）按记录 ID 稳定随机
 * ============================================================ */

:root {
  --bg: #faf7f3;
  --surface: rgba(255, 255, 255, .90);
  --surface-solid: #ffffff;
  --surface-2: rgba(255, 255, 255, .74);
  --ink: #322c39;
  --ink-soft: #6f6879;
  --muted: #8c8497;
  --line: rgba(255, 255, 255, .70);
  --line-strong: rgba(160, 148, 172, .28);

  --rose: #fb6f92;
  --rose-deep: #f54e7d;
  --rose-soft: rgba(255, 233, 238, .88);

  --peach: #ffab5e;   --peach-soft: #ffeede;
  --mint: #27cdb0;    --mint-soft: rgba(221, 247, 241, .88);
  --sky: #46b7f4;     --sky-soft: rgba(226, 244, 254, .88);
  --lav: #9a7ff2;     --lav-soft: rgba(238, 234, 254, .88);
  --butter: #f4c41a;  --butter-soft: rgba(253, 243, 211, .9);
  --green: #35c26f;   --green-soft: rgba(221, 245, 231, .9);

  --r-xl: 24px;
  --r-lg: 18px;
  --r-md: 13px;
  --r-sm: 9px;

  --glass-side: 30%;
  --glass-main: 42%;

  --sh-sm: 0 1px 2px rgba(40, 30, 50, .05);
  --sh-md: 0 2px 6px rgba(40, 30, 50, .06), 0 14px 30px rgba(40, 30, 50, .08);
  --sh-lg: 0 6px 16px rgba(40, 30, 50, .10), 0 24px 50px rgba(40, 30, 50, .12);
  --sh-pop: 0 12px 44px rgba(40, 30, 50, .20);

  --font: "Nunito", -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }

body {
  font-family: var(--font);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--bg);
}

/* ---------- 壁纸层 ---------- */
.wp {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.04);
  filter: blur(1.5px) saturate(1.02);
}
.wp::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(252, 251, 250, .26) 0%, rgba(252, 251, 250, .12) 44%, rgba(252, 251, 250, .26) 100%);
}

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.015em; }
::selection { background: var(--rose-soft); color: var(--rose-deep); }

/* 图标图片通用：避免拖拽与选区，保证行内对齐 */
img.ic, img.chip-ic, img.stat-ic, img.h-ic, img.btn-ic, img.ch-ic,
img.ef-ic, img.brand-logo, img.tb-logo, img.g-ic, img.g-fig,
img.node-ic, img.rec-ic, img.mn-avatar { -webkit-user-drag: none; user-select: none; }

/* ============ 按钮 / 表单 ============ */
.btn {
  border: none; border-radius: var(--r-md); padding: 12px 18px;
  font-size: 15px; font-weight: 800; letter-spacing: .01em;
  transition: transform .15s ease, box-shadow .2s ease, background .2s, filter .2s;
}
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary {
  background: linear-gradient(135deg, var(--rose), var(--rose-deep));
  color: #fff; box-shadow: 0 10px 24px rgba(245, 78, 125, .32);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(245, 78, 125, .4); }
.btn-ghost { background: rgba(255, 255, 255, .7); color: var(--ink-soft); border: 1.5px solid var(--line-strong); }
.btn-ghost:hover { background: #fff; color: var(--ink); }
.btn-sm { padding: 8px 15px; font-size: 13px; border-radius: var(--r-sm); }
.btn-block { width: 100%; display: block; text-align: center; text-decoration: none; line-height: 1.5; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 800; color: var(--ink-soft); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 15px; font-size: 15px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
  background: rgba(255, 255, 255, .78); color: var(--ink);
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--rose); background: #fff;
  box-shadow: 0 0 0 4px var(--rose-soft);
}

/* ============ 未登录提示 ============ */
#gate-view {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center; padding: 24px;
}
.gate-card {
  width: 100%; max-width: 430px; text-align: center;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: var(--r-xl); box-shadow: var(--sh-lg);
  padding: 40px 34px 30px;
}
.gate-card .gate-logo { width: 66px; height: 66px; object-fit: contain; margin-bottom: 14px; }
.gate-card h2 { font-size: 23px; margin-bottom: 12px; }
.gate-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.75; margin: 0 0 24px; }
.gate-card p b { color: var(--rose-deep); }
.gate-card .gate-reg { display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 800; color: var(--ink-soft); text-decoration: none; border-bottom: 1px dashed var(--line-strong); padding-bottom: 2px; }
.gate-card .gate-reg:hover { color: var(--rose-deep); }
.gate-card .gate-tip { margin-top: 18px; font-size: 12.5px; color: var(--muted); }

/* ============ 应用骨架 ============ */
#app-shell { display: none; min-height: 100vh; }
#app-shell.show { display: flex; }

/* 侧边栏：30% 白 + 毛玻璃 */
.sidebar {
  width: 246px; flex-shrink: 0;
  background: rgba(255, 255, 255, var(--glass-side));
  /* 壁纸 bz11 是扁平的蓝天/白云：只做半透明白 + 模糊时，侧栏里的白云会被
     洗成一块一块的浅色形状（用户看到"多了个半透明面板"），而且侧栏比右侧
     主内容更白，边界像一道硬边。
     这里做两件事：
       1) 亮度微抬、对比度压平 —— 把白云/蓝天的色差收窄，形状感消失；
       2) 白度 32%→30%、模糊 16→24px —— 让侧栏与主内容过渡更连续。
     实测（1440×900 真实浏览器截图）：跨边界色差 -9.8%、侧栏内块状度 -10.2%，
     侧栏整体亮度基本不变（不发灰）。 */
  backdrop-filter: blur(24px) saturate(132%) brightness(1.14) contrast(.82);
  -webkit-backdrop-filter: blur(24px) saturate(132%) brightness(1.14) contrast(.82);
  border-right: 1px solid rgba(255, 255, 255, .45);
  display: flex; flex-direction: column; padding: 20px 14px;
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 18px; }
.brand-logo { width: 40px; height: 40px; object-fit: contain; }
.brand-name { font-size: 20px; font-weight: 900; letter-spacing: -.02em; }
.brand-name span { background: linear-gradient(135deg, var(--rose), var(--rose-deep)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.nav { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.nav-label { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--ink-soft); text-transform: uppercase; padding: 14px 12px 6px; opacity: .72; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; border: none; background: transparent; border-radius: var(--r-md);
  color: var(--ink); font-size: 15px; font-weight: 700; text-align: left;
  transition: background .16s, color .16s, transform .16s;
}
.nav-item:hover { background: rgba(255, 255, 255, .74); transform: translateX(2px); }
.nav-item.active { background: rgba(255, 255, 255, .94); color: var(--rose-deep); box-shadow: var(--sh-sm); }
.nav-item.active::before {
  content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 58%; border-radius: 999px; background: linear-gradient(180deg, var(--rose), var(--rose-deep));
}
.nav-item .ic { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.nav-item.disabled { color: var(--muted); cursor: not-allowed; opacity: .7; }
.nav-item.disabled:hover { background: transparent; transform: none; }
.nav-item .tag { margin-left: auto; font-size: 10px; font-weight: 800; background: var(--butter-soft); color: #a97c0a; padding: 2px 8px; border-radius: 999px; }

.side-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .55); }
.user-chip { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: var(--r-md); background: rgba(255, 255, 255, .60); }
.user-chip .av { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; background: var(--rose-soft); }
.user-chip .nm { font-weight: 800; font-size: 14px; }
.user-chip .gr { font-size: 12px; color: var(--ink-soft); }
.side-foot .logout {
  margin-top: 9px; width: 100%; background: rgba(255, 255, 255, .64); color: var(--ink-soft);
  border: 1px solid rgba(255, 255, 255, .6); padding: 9px; border-radius: var(--r-md); font-size: 13px; font-weight: 800;
  transition: all .16s;
}
.side-foot .logout:hover { background: #ffeef2; color: var(--rose-deep); border-color: #f6d2db; }

/* ============ 主内容 ============ */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 14px 18px 18px 4px; }

/* 顶栏：轻毛玻璃条 */
.topbar {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255, 255, 255, .48);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 20px; padding: 12px 18px; margin-bottom: 14px;
  position: relative; z-index: 6;
}
.topbar .tb-logo { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; }
.topbar h1 { font-size: 23px; font-weight: 900; }
.topbar .crumb { font-size: 12.5px; color: var(--ink-soft); margin-top: 1px; }
.topbar .spacer { flex: 1; }
.topbar .date-chip {
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .8); padding: 9px 15px;
  border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--ink-soft); box-shadow: var(--sh-sm);
  white-space: nowrap;
}

/* ---------- 主站头像 + 下拉菜单 ---------- */
.mn-user { position: relative; z-index: 20; }
.mn-user .mn-avatar {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover; display: block;
  border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 4px 12px rgba(40, 30, 50, .16);
  cursor: pointer; background: #fff;
}
.mn-menu {
  display: none; position: absolute; top: 52px; right: 0; width: 300px;
  background: #fff; border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 22px rgba(7, 17, 27, .22); z-index: 9999;
}
.mn-user:hover .mn-menu, .mn-menu:hover, .mn-user.open .mn-menu { display: block; }
/* 悬浮桥：补住头像底边(42px)到菜单顶边(52px)之间的 10px 空隙。
   鼠标从头像往下移向菜单时，这段透明区域仍算「在菜单上」，
   下拉框就不会因为中间空了一下而闪退。 */
.mn-menu::before {
  content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.mn-menu .mn-arrow {
  position: absolute; top: -8px; right: 15px; width: 13px; height: 8px;
  background: #fff; clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.mn-top { display: flex; align-items: center; padding: 14px 0 10px; }
.mn-top .mn-face { display: block; padding: 0 14px 0 24px; text-decoration: none; }
.mn-top .mn-face img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); display: block; }
.mn-txt { flex: 1; min-width: 0; }
.mn-nick { display: block; font-size: 14px; color: #333; text-decoration: none; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mn-nick:hover { color: #ff700a; }
.mn-vip { display: flex; align-items: center; margin-top: 3px; }
.mn-vip i { width: 21px; height: 21px; background-repeat: no-repeat; background-size: contain; float: left; }
.mn-vip span { font-size: 12px; margin-left: 3px; height: 21px; line-height: 21px; }
.mn-vip span.is-gold { color: #ff8c1a; font-weight: bold; animation: mnGlow 1.6s ease-in-out infinite; }
.mn-vip span.is-normal { color: #999; }
@keyframes mnGlow {
  0%, 100% { text-shadow: 0 0 2px rgba(255, 150, 0, .45); opacity: .9; }
  50% { text-shadow: 0 0 8px rgba(255, 160, 0, .95), 0 0 16px rgba(255, 110, 0, .75), 0 0 22px rgba(255, 80, 0, .45); opacity: 1; }
}
.mn-vipcard {
  margin: 0 20px 10px; padding: 9px 12px; border-radius: 6px;
  background: #ffecdf; text-align: center; line-height: 1.5;
}
.mn-vipcard a { color: #ff700a; font-size: 13.5px; text-decoration: none; }
.mn-vipcard .mn-vipbtn { display: inline-block; margin-top: 6px; padding: 5px 18px; background: #ff700a; color: #fff; border-radius: 20px; font-size: 13px; }
.mn-vipcard.is-gold { font-weight: bold; color: #e4393c; }
.mn-funcs { list-style: none; margin: 0; padding: 16px 0 12px; background: #fff; border-top: 1px solid #eee; border-bottom: 1px solid #eee; overflow: hidden; }
.mn-funcs li { width: 33.333%; float: left; }
.mn-funcs a { display: block; text-align: center; text-decoration: none; }
.mn-funcs .mn-fi { display: block; width: 52px; height: 52px; margin: 0 auto; border-radius: 5px; background-repeat: no-repeat; background-size: contain; }
.mn-funcs p { margin: 5px 0 0; font-size: 13.5px; line-height: 22px; color: #333; }
.mn-funcs a:hover p { color: #ff6f06; }
.mn-out { padding: 8px 24px 12px; text-align: right; }
.mn-out a { font-size: 14px; color: #333; text-decoration: none; cursor: pointer; }
.mn-out a:hover { color: #ff700a; }

/* ---------- 右侧内容区：20% 白毛玻璃 · 大圆角 ---------- */
.content {
  flex: 1;
  background: rgba(255, 255, 255, var(--glass-main));
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 26px;
  box-shadow: 0 10px 34px rgba(40, 30, 50, .10);
  padding: 22px 26px 30px;
}
.view { max-width: 1120px; margin: 0 auto; display: none; }
.view.active { display: block; animation: fadeUp .38s cubic-bezier(.2, .7, .3, 1); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ============ 通用卡片 ============ */
.card {
  background: var(--surface); border: 1px solid rgba(255, 255, 255, .72);
  border-radius: var(--r-xl); box-shadow: var(--sh-md);
  padding: 20px 22px; margin-bottom: 18px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; gap: 12px; }
.card-head h2 { font-size: 17.5px; font-weight: 800; display: flex; align-items: center; gap: 9px; }
.card-head h2 .h-ic { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.card-head .link { font-size: 13px; font-weight: 800; color: var(--rose-deep); background: var(--rose-soft); border: none; padding: 7px 12px; border-radius: 999px; transition: all .16s; }
.card-head .link:hover { background: var(--rose); color: #fff; }

/* ============ 主页 Hero ============ */
.greeting {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, #ff8ba4 0%, #fb6f92 45%, #f6a15f 120%);
  color: #fff; border-radius: var(--r-xl); padding: 26px 28px;
  display: flex; align-items: center; gap: 20px; margin-bottom: 18px;
  box-shadow: 0 18px 40px rgba(245, 78, 125, .30);
}
.g-blobs i { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .18); filter: blur(6px); }
.g-blobs i:nth-child(1) { width: 170px; height: 170px; top: -60px; right: 8%; }
.g-blobs i:nth-child(2) { width: 90px; height: 90px; bottom: -40px; left: 40%; }
.g-blobs i:nth-child(3) { width: 60px; height: 60px; top: 18px; right: 42%; opacity: .7; }
.g-emoji { position: relative; z-index: 2; flex-shrink: 0; }
.g-emoji img { width: 62px; height: 62px; object-fit: contain; display: block; animation: bob 4s ease-in-out infinite; }
.greeting .gt { position: relative; z-index: 2; }
.greeting .g-hi { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .92; margin-bottom: 5px; }
.greeting h1 { font-size: 27px; font-weight: 900; letter-spacing: -.02em; }
.greeting .meta { font-size: 14.5px; opacity: .94; margin-top: 4px; }
.g-avatar { margin-left: auto; position: relative; z-index: 2; flex-shrink: 0; }
.g-avatar img { width: 104px; height: 104px; object-fit: contain; display: block; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .18)); animation: bob 5s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }

/* 男孩主题：问候卡淡蓝（女孩保持玫瑰粉） */
.greeting.boy {
  background: linear-gradient(120deg, #9ad8f7 0%, #6fbcf2 48%, #7ea6f3 125%);
  box-shadow: 0 18px 40px rgba(72, 138, 214, .30);
}

/* ============ 主页网格 ============ */
.home-grid { display: grid; grid-template-columns: 1fr 330px; gap: 18px; align-items: start; }
.col-main { min-width: 0; }
.col-side { position: sticky; top: 14px; }

/* 统计卡 */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 18px; }
.stat {
  background: var(--surface); border: 1px solid rgba(255, 255, 255, .72); border-radius: var(--r-lg);
  padding: 16px; box-shadow: var(--sh-sm); backdrop-filter: blur(6px);
  display: flex; align-items: center; gap: 14px;
  transition: transform .18s, box-shadow .18s;
  animation: rise .5s cubic-bezier(.2, .7, .3, 1) both;
}
.stat:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.stat:nth-child(2) { animation-delay: .06s } .stat:nth-child(3) { animation-delay: .12s } .stat:nth-child(4) { animation-delay: .18s }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.stat .chip { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; flex-shrink: 0; }
.stat .chip img { width: 34px; height: 34px; object-fit: contain; }
.stat.s1 .chip { background: linear-gradient(135deg, #ffd7e1, #ffc2d2); }
.stat.s2 .chip { background: linear-gradient(135deg, #d6f7ef, #bff0e6); }
.stat.s3 .chip { background: linear-gradient(135deg, #fdecb8, #fbe29a); }
.stat.s4 .chip { background: linear-gradient(135deg, #e2dbfd, #d2c6fb); }
.stat .v { font-size: 29px; font-weight: 900; letter-spacing: -.02em; line-height: 1; }
.stat .v .unit { font-size: 14px; font-weight: 800; color: var(--muted); margin-left: 2px; }
.stat .l { font-size: 13px; color: var(--muted); font-weight: 800; margin-top: 5px; }

/* 目标卡 */
.goals-card .ring-wrap { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.ring { width: 92px; height: 92px; transform: rotate(-90deg); }
.ring .bg { fill: none; stroke: rgba(160, 148, 172, .22); stroke-width: 11; }
.ring .fg { fill: none; stroke: url(#rg); stroke-width: 11; stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.2, .7, .3, 1); }
.ring-info b { display: block; font-size: 26px; font-weight: 900; letter-spacing: -.02em; }
.ring-info span { font-size: 13px; color: var(--muted); font-weight: 700; }

.goal {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  border-radius: var(--r-md); background: rgba(255, 255, 255, .58); border: 1px solid rgba(255, 255, 255, .7);
  margin-bottom: 9px; cursor: pointer; transition: background .16s, border-color .16s;
}
.goal:hover { background: var(--rose-soft); border-color: #f6d2db; }
.goal .box {
  width: 23px; height: 23px; border-radius: 8px; border: 2px solid var(--line-strong);
  display: grid; place-items: center; font-size: 13px; color: #fff; flex-shrink: 0;
  transition: all .18s cubic-bezier(.2, .7, .3, 1);
}
.goal.done { background: var(--green-soft); border-color: #bfe9d2; }
.goal.done .box { background: linear-gradient(135deg, #4ad184, var(--green)); border-color: transparent; transform: scale(1.05); }
.goal.done .t { text-decoration: line-through; color: var(--muted); }
.goal .t { font-weight: 700; font-size: 14.5px; }
.goal .del { margin-left: auto; border: none; background: none; color: var(--muted); font-size: 14px; opacity: 0; transition: opacity .15s, color .15s; }
.goal:hover .del { opacity: 1; }
.goal .del:hover { color: var(--rose-deep); transform: scale(1.15); }

/* ---------- 成长点滴：堆叠便签 ---------- */
.notes-list { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; padding: 8px 6px 12px; }
.note {
  position: relative; display: flex; gap: 12px; padding: 15px 15px 13px;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 10px 22px rgba(40, 30, 50, .16);
  transition: transform .24s cubic-bezier(.2, .7, .3, 1), box-shadow .24s;
  transform-origin: 50% 100%;
}
/* 第二层「纸」：向右下错开，露出边角，做出层叠手感 */
.note::before {
  content: ""; position: absolute; z-index: -1;
  left: 9px; right: -3px; top: 10px; bottom: -9px;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 4px 10px rgba(40, 30, 50, .10);
}
.note.t1 { background: var(--rose-soft); transform: rotate(-2.2deg); }
.note.t1::before { background: #ffcbdb; }
.note.t2 { background: var(--mint-soft); transform: rotate(1.8deg); }
.note.t2::before { background: #b2ead9; }
.note.t3 { background: var(--butter-soft); transform: rotate(-1.6deg); }
.note.t3::before { background: #f7e39a; }
.note.t4 { background: var(--lav-soft); transform: rotate(2.4deg); }
.note.t4::before { background: #d2c6fa; }
.note:hover {
  transform: rotate(0) translateY(-10px) scale(1.03);
  box-shadow: 0 22px 40px rgba(40, 30, 50, .24);
  z-index: 3;
}
.note .ne { width: 40px; height: 40px; flex-shrink: 0; }
.note .ne img { width: 100%; height: 100%; object-fit: contain; }
.note .nc { flex: 1; min-width: 0; }
.note .nc p { margin: 0 0 5px; font-size: 14.5px; line-height: 1.6; word-break: break-word; }
.note .nc .nd { font-size: 12px; color: var(--ink-soft); font-weight: 700; opacity: .78; }
.note .ndel { align-self: flex-start; border: none; background: none; color: var(--ink-soft); font-size: 13px; opacity: 0; transition: opacity .15s; }
.note:hover .ndel { opacity: .85; }
.note .ndel:hover { color: var(--rose-deep); }

/* 快捷操作 */
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.qbtn {
  border: none; border-radius: var(--r-lg); padding: 20px 17px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; text-align: left;
  color: #fff; transition: transform .18s, box-shadow .2s; position: relative; overflow: hidden;
}
.qbtn::after { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, .16); right: -40px; bottom: -50px; }
.qbtn:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.qbtn.q-study { background: linear-gradient(135deg, #ff8ba4, var(--rose-deep)); }
.qbtn.q-life { background: linear-gradient(135deg, #3fe0c2, #1fb89a); }
.qbtn.q-analysis { background: linear-gradient(135deg, #a98df5, #7f63ee); }
.qbtn .qi { width: 46px; height: 46px; position: relative; z-index: 2; }
.qbtn .qi img { width: 100%; height: 100%; object-fit: contain; }
.qbtn .qt b { display: block; font-size: 16px; font-weight: 900; }
.qbtn .qt span { font-size: 12.5px; opacity: .92; }

/* ============ 学科按钮行（一行四个） ============ */
.sub-row { display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 18px; }
.sub-chip {
  flex: 0 0 calc(25% - 8.25px); max-width: calc(25% - 8.25px);
  background: var(--surface); border: 1px solid rgba(255, 255, 255, .72);
  border-radius: var(--r-lg); padding: 14px 12px; box-shadow: var(--sh-sm);
  text-align: center; position: relative; transition: transform .16s, box-shadow .16s;
}
.sub-chip:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.sub-chip .k { font-size: 13px; color: var(--muted); font-weight: 800; }
.sub-chip .val { font-size: 24px; font-weight: 900; letter-spacing: -.02em; margin-top: 3px; }
.sub-chip .val .unit { font-size: 12px; font-weight: 800; color: var(--muted); }
.sub-chip .bar { height: 7px; border-radius: 999px; background: rgba(160, 148, 172, .2); margin-top: 9px; overflow: hidden; }
.sub-chip .bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--rose), var(--rose-deep)); transform-origin: left; animation: grow .7s cubic-bezier(.2, .7, .3, 1) both; }
.sub-chip.is-add {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px dashed var(--line-strong); background: rgba(255, 255, 255, .40);
  color: var(--ink-soft); font-weight: 800; font-size: 14.5px; box-shadow: none; cursor: pointer;
}
.sub-chip.is-add:hover { border-color: var(--rose); color: var(--rose-deep); background: var(--rose-soft); }
.sub-chip.is-add .plus { font-size: 19px; line-height: 1; margin-top: -2px; }
.sub-chip .sub-del {
  position: absolute; top: 6px; right: 7px; width: 19px; height: 19px; border-radius: 50%;
  border: none; background: rgba(255, 255, 255, .85); color: var(--muted); font-size: 11px;
  line-height: 1; opacity: 0; transition: opacity .15s, color .15s;
}
.sub-chip:hover .sub-del { opacity: 1; }
.sub-chip .sub-del:hover { color: var(--rose-deep); background: #fff; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 生活：沿用上面的四列宽度 */
.life-row .sub-chip { flex: 0 0 calc(25% - 8.25px); max-width: calc(25% - 8.25px); }

/* ============ 记录列表 ============ */
.rec {
  display: flex; align-items: center; gap: 14px; padding: 13px 15px;
  background: var(--surface); border: 1px solid rgba(255, 255, 255, .72); border-radius: var(--r-md);
  margin-bottom: 10px; box-shadow: var(--sh-sm); transition: box-shadow .16s, transform .16s;
}
.rec:hover { box-shadow: var(--sh-md); transform: translateX(2px); }
.rec .badge { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; background: rgba(255, 255, 255, .7); }
.rec .badge img { width: 34px; height: 34px; object-fit: contain; }
.rec .rb { flex: 1; min-width: 0; }
.rec .rb .t1 { font-weight: 800; font-size: 15px; }
.rec .rb .t2 { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.rec .score { font-weight: 900; font-size: 20px; color: var(--rose-deep); letter-spacing: -.02em; }
.rec .unit { font-size: 12px; font-weight: 800; color: var(--muted); margin-left: 2px; }
.rec .pill { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--ink-soft); }
.rec .pill.tag-teal { background: var(--mint-soft); color: #147f6c; }
.rec .pill.tag-amber { background: var(--butter-soft); color: #a97c0a; }
.rec .pill.tag-violet { background: var(--lav-soft); color: #6a4de0; }
.rec .del { border: none; background: none; color: var(--muted); font-size: 15px; transition: color .15s, transform .15s; }
.rec .del:hover { color: var(--rose-deep); transform: scale(1.15); }

/* ============ 成长分析 ============ */
.score-hero {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 24px;
  background: linear-gradient(120deg, #2e2a4a 0%, #463c74 60%, #6a4de0 130%);
  color: #fff; border-radius: var(--r-xl); padding: 26px 28px; margin-bottom: 18px;
  box-shadow: 0 18px 40px rgba(70, 60, 116, .35);
}
.score-hero .orb { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .12); filter: blur(8px); }
.score-hero .orb.a { width: 190px; height: 190px; right: -50px; top: -70px; }
.score-hero .orb.b { width: 110px; height: 110px; right: 30%; bottom: -50px; }
.score-hero .score-box { position: relative; z-index: 2; }
.score-hero .score-num { font-size: 50px; font-weight: 900; line-height: 1; letter-spacing: -.03em; }
.score-hero .cap { font-size: 14px; opacity: .9; margin-top: 6px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
/* 成长积分旁的勋章小图标（闪烁） */
.score-hero .cap .medals { display: inline-flex; align-items: center; gap: 5px; }
.score-hero .cap .medals img {
  width: 26px; height: 26px; object-fit: contain;
  animation: medalFlash 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
}
.score-hero .cap .medals img:nth-child(2) { animation-delay: .22s; }
.score-hero .cap .medals img:nth-child(3) { animation-delay: .44s; }
.score-hero .cap .medals img:nth-child(4) { animation-delay: .66s; }
@keyframes medalFlash {
  0%, 100% { opacity: .55; transform: scale(.9); filter: drop-shadow(0 0 0 rgba(255, 236, 160, 0)); }
  50% { opacity: 1; transform: scale(1.12); filter: drop-shadow(0 0 9px rgba(255, 236, 160, .95)); }
}
.score-hero .score-note { font-size: 12.5px; opacity: .8; margin-top: 10px; line-height: 1.7; }
.score-hero .right { margin-left: auto; text-align: right; font-size: 14px; opacity: .94; line-height: 1.7; position: relative; z-index: 2; white-space: nowrap; }

.ach-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 13px; }
.ach {
  position: relative; display: flex; gap: 13px; align-items: center; padding: 15px;
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: var(--sh-sm); transition: transform .16s, box-shadow .16s;
}
.ach:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.ach .ai { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .72); flex-shrink: 0; }
.ach .ai img { width: 38px; height: 38px; object-fit: contain; }
.ach .an { font-weight: 800; font-size: 15px; }
.ach .ad { font-size: 12.5px; color: var(--muted); }
.ach .lock { margin-left: auto; font-size: 17px; }
.ach.locked { opacity: .58; filter: grayscale(.6); }
.ach:not(.locked) { border-color: rgba(243, 213, 140, .85); }
.ach:not(.locked)::after { content: "已解锁"; position: absolute; top: -9px; right: 12px; font-size: 10px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ffd34d, var(--butter)); padding: 2px 8px; border-radius: 999px; }

.chart-row { display: flex; flex-direction: column; gap: 15px; }
.bar-line { display: flex; align-items: center; gap: 14px; }
.bar-line .lbl { width: 58px; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.bar-line .track { flex: 1; height: 15px; border-radius: 999px; background: rgba(160, 148, 172, .18); overflow: hidden; }
.bar-line .track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3fe0c2, #1fb89a); transform-origin: left; animation: grow .8s cubic-bezier(.2, .7, .3, 1) both; }
.bar-line .num { width: 52px; text-align: right; font-weight: 900; font-size: 15px; flex-shrink: 0; }
.bar-line .num .unit { font-size: 11px; font-weight: 800; color: var(--muted); margin-left: 1px; }

.encourage {
  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(255, 255, 255, .8); border-radius: var(--r-lg); padding: 18px 20px;
  display: flex; gap: 15px; align-items: center; margin-bottom: 18px;
  box-shadow: var(--sh-sm);
}
.encourage .ef-ic { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; }
.encourage .et b { font-size: 16px; display: block; margin-bottom: 3px; }
.encourage .et span { color: var(--ink-soft); font-size: 14px; line-height: 1.7; }

/* ============ 个人中心 ============ */
.tabs { display: inline-flex; gap: 6px; padding: 5px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .8); border-radius: 999px; margin-bottom: 18px; box-shadow: var(--sh-sm); }
.tab { padding: 9px 18px; border-radius: 999px; border: none; background: transparent; font-weight: 800; font-size: 14px; color: var(--ink-soft); transition: all .18s; }
.tab:hover { color: var(--ink); }
.tab.active { background: linear-gradient(135deg, var(--rose), var(--rose-deep)); color: #fff; box-shadow: 0 6px 14px rgba(245, 78, 125, .3); }
.tabpane { display: none; }
.tabpane.active { display: block; animation: fadeUp .3s ease; }

/* 资料表单：两列，按「头像|年级」「姓名|年龄」「性别|爱好」成对排列 */
.profile-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) 1fr; gap: 16px 20px; align-items: start; }
.profile-grid .field { margin-bottom: 0; }
.profile-grid .field-avatar { align-self: start; min-width: 0; }
/* 头像：十个横排一行，间距收紧（窗口太窄时自动折行，不溢出） */
.profile-grid .field-avatar .av-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.av-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.av-opt {
  width: 44px; height: 44px; border-radius: 13px; border: 2px solid rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .62); padding: 3px; transition: all .15s; flex-shrink: 0;
}
.av-opt img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; }
.av-opt:hover { transform: translateY(-2px); border-color: var(--rose); }
.av-opt.on { border-color: var(--rose); background: var(--rose-soft); box-shadow: 0 0 0 3px var(--rose-soft); }

.gender-pick { display: flex; gap: 10px; }
.gender-pick .g-opt {
  flex: 1; padding: 11px 14px; border-radius: var(--r-md);
  border: 1.5px solid var(--line-strong); background: rgba(255, 255, 255, .68);
  font-size: 15px; font-weight: 800; color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: border-color .16s, background .16s, color .16s, box-shadow .16s;
}
.gender-pick .g-opt img { width: 30px; height: 30px; object-fit: contain; }
.gender-pick .g-opt:hover { border-color: var(--rose); color: var(--ink); }
.gender-pick .g-opt.on { border-color: var(--rose); background: var(--rose-soft); color: var(--rose-deep); box-shadow: 0 0 0 3px var(--rose-soft); }
.gender-pick .g-opt.on[data-g="男"] { border-color: var(--sky); background: var(--sky-soft); color: #1d7fb8; box-shadow: 0 0 0 3px var(--sky-soft); }
.pick-hint { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.5; }

.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .6); gap: 14px; }
.setting-row:last-child { border-bottom: none; }
.setting-row .st b { display: block; font-size: 15px; }
.setting-row .st span { font-size: 13px; color: var(--muted); }
.setting-row .rb-ic { width: 26px; height: 26px; object-fit: contain; }
.setting-row .about-link { color: var(--rose-deep); font-weight: 800; text-decoration: none; border-bottom: 1px dashed rgba(245, 78, 125, .5); margin-left: 4px; }
.setting-row .about-link:hover { color: #d93663; }
.setting-row .rb-wrap { display: inline-flex; align-items: center; gap: 7px; }

/* ============ 弹窗 ============ */
.modal-mask {
  position: fixed; inset: 0; background: rgba(45, 36, 55, .42); display: none;
  align-items: center; justify-content: center; z-index: 100;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 20px;
}
.modal-mask.show { display: flex; animation: fadeUp .2s ease; }
.modal {
  background: rgba(255, 255, 255, .96); border-radius: var(--r-xl); width: 100%; max-width: 450px;
  padding: 26px; box-shadow: var(--sh-pop); animation: pop .28s cubic-bezier(.2, .7, .3, 1);
  max-height: 88vh; overflow: auto;
}
@keyframes pop { from { transform: scale(.94) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal h3 { font-size: 19px; margin-bottom: 18px; font-weight: 900; }
.modal .actions { display: flex; gap: 11px; margin-top: 22px; }
.modal .actions .btn { flex: 1; }
.modal .note-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.modal .note-pick button { width: 44px; height: 44px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .9); background: rgba(241, 238, 246, .8); padding: 3px; transition: all .15s; }
.modal .note-pick button img { width: 100%; height: 100%; object-fit: contain; display: block; }
.modal .note-pick button.on { border-color: var(--rose); background: var(--rose-soft); }

/* ============ Toast ============ */
#toast {
  position: fixed; top: 22px; left: 50%; transform: translateX(-50%) translateY(-24px);
  background: linear-gradient(135deg, #3a3348, #241f2e); color: #fff; padding: 12px 22px;
  border-radius: 999px; font-weight: 800; font-size: 14px; box-shadow: var(--sh-pop);
  opacity: 0; pointer-events: none; transition: all .32s cubic-bezier(.2, .7, .3, 1); z-index: 200;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============ 分析页：标注 / 分析卡 / AI 分析 ============ */
.card-note { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.empty-line { color: var(--muted); margin: 0; font-size: 14px; }

.insight-card {
  position: relative; overflow: hidden; background: var(--surface);
  border: 1px solid rgba(255, 255, 255, .75); border-radius: var(--r-xl);
  box-shadow: var(--sh-md); padding: 20px 22px 20px 26px; margin-bottom: 18px;
}
.insight-card::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 5px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--rose), var(--peach));
}
.insight-card .ih { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.insight-card .ih h2 { font-size: 17.5px; font-weight: 800; display: flex; align-items: center; gap: 9px; }
.insight-card .ih h2 .h-ic { width: 26px; height: 26px; object-fit: contain; }
.insight-card .badge-mini {
  font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px;
  background: var(--peach-soft); color: #b56a12;
}
.insight-card p { margin: 0; font-size: 15.5px; line-height: 1.85; color: var(--ink); }

/* AI 分析 */
.ai-card { background: rgba(255, 255, 255, .84); border-color: rgba(232, 226, 251, .95); }
.ai-card .card-head h2 .h-ic { width: 28px; height: 28px; }
.ai-card .ai-cost {
  font-size: 12.5px; color: var(--muted); font-weight: 700;
  background: rgba(241, 238, 246, .8); border: 1px solid rgba(255, 255, 255, .8);
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.ai-body { font-size: 15px; line-height: 1.95; color: var(--ink-soft); min-height: 60px; }
.ai-body p { margin: 0 0 13px; }
.ai-body p:last-child { margin-bottom: 0; }
.ai-body .hl { color: #6a4de0; font-weight: 800; border-bottom: 2px solid #ded5fb; }
/* 逐字输出光标 */
.ai-body.typing::after {
  content: "▍"; color: var(--lav); font-weight: 900;
  animation: caret 1s steps(2, start) infinite; margin-left: 1px;
}
@keyframes caret { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
.ai-skel { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13.5px; font-weight: 700; }
.ai-skel .dots i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--lav); margin-right: 4px; animation: bounce 1.1s infinite; }
.ai-skel .dots i:nth-child(2) { animation-delay: .16s; }
.ai-skel .dots i:nth-child(3) { animation-delay: .32s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .45 } 30% { transform: translateY(-5px); opacity: 1 } }

/* ---------- 普通会员：AI 分析半遮挡（只露第一行 + 毛玻璃遮住其余） ---------- */
.ai-lock {
  position: relative; overflow: hidden; max-height: 292px;
  border-radius: var(--r-lg);
}
/* 第一段真实文字：CSS 截断成一行 */
.ai-peek { font-size: 15px; line-height: 1.95; color: var(--ink-soft); max-height: 1.95em; overflow: hidden; }
.ai-peek .hl { color: #6a4de0; font-weight: 800; border-bottom: 2px solid #ded5fb; }
/* 其余位置：占位段落模糊成文字轮廓 */
.ai-fake {
  font-size: 15px; line-height: 1.95; color: var(--ink-soft);
  margin-top: 13px; filter: blur(3.2px); opacity: .9;
  user-select: none; pointer-events: none;
}
.ai-fake p { margin: 0 0 13px; }
/* 毛玻璃遮挡层：从第二行开始盖住（薄纱，能透出模糊文字轮廓） */
.ai-veil {
  position: absolute; left: 0; right: 0; top: calc(1.95em + 6px); bottom: 0;
  display: grid; place-items: center; padding: 18px 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .44) 40%, rgba(255, 255, 255, .74) 100%);
  backdrop-filter: blur(2.5px) saturate(140%);
  -webkit-backdrop-filter: blur(2.5px) saturate(140%);
  animation: veilIn .55s ease both;
}
@keyframes veilIn { from { opacity: 0; } to { opacity: 1; } }
.ai-veil-in {
  text-align: center; max-width: 470px;
  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 18px; padding: 16px 22px;
  box-shadow: 0 10px 26px rgba(40, 30, 50, .10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ai-lock-ic { width: 40px; height: 40px; object-fit: contain; opacity: .85; margin-bottom: 8px; }
.ai-lock-tip { margin: 0; font-size: 15.5px; font-weight: 800; color: var(--ink); }
.ai-lock-sub { margin: 6px 0 12px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.ai-lock-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ai-lock-btns .btn { text-decoration: none; display: inline-block; }
@media (max-width: 700px) {
  .ai-lock { max-height: 268px; }
  .ai-veil { padding: 16px 14px; }
  .ai-veil-in { padding: 14px 16px; }
  .ai-lock-btns { flex-direction: column; align-items: stretch; }
  .ai-lock-btns .btn { text-align: center; }
}

/* ============ 响应式 ============ */
@media (max-width: 1120px) {
  .home-grid { grid-template-columns: 1fr 292px; }
  .sub-chip { flex: 0 0 calc(33.333% - 7.34px); max-width: calc(33.333% - 7.34px); }
  .life-row .sub-chip { flex: 0 0 calc(33.333% - 7.34px); max-width: calc(33.333% - 7.34px); }
}
@media (max-width: 1020px) {
  .home-grid { grid-template-columns: 1fr; }
  .col-side { position: static; }
}
@media (max-width: 920px) {
  .notes-list { grid-template-columns: 1fr; }
  .quick { grid-template-columns: 1fr 1fr; }
  .sub-chip, .life-row .sub-chip { flex: 0 0 calc(50% - 5.5px); max-width: calc(50% - 5.5px); }
}
/* ============ 手机端（≤760px）：顶部吸顶栏 + 底部 Tab 导航 ============
   之前的做法是把 PC 侧栏原地压成一条"横向滚动条"，实测问题很大：
     ① 6 个导航项在 390px 屏上只露出 3 个（成长分析/个人中心/游戏全在屏幕外，得横滑）；
     ② 导航条高达 153px，很占屏；
     ③ position:static，往下滚 600px 整条导航就滚出屏幕，没法切页。
   现在改成：导航固定到屏幕底部做 Tab（6 项全部一次可见、滚动时永远在），
   顶栏 sticky 吸顶显示当前页标题 + 头像。
   ⚠️ 注意：.sidebar / .topbar 都有 backdrop-filter，它会给后代的 position:fixed
   创建定位上下文（fixed 会相对它定位、并被它的 overflow 裁剪），所以这里让
   .sidebar **整体** fixed 到底部（它自身是 #app-shell 的子元素，上层没有 filter），
   而不是让内部的 .nav 去 fixed。头像下拉同理改用 absolute 相对 .topbar。 */
@media (max-width: 760px) {
  #app-shell.show { flex-direction: column; }

  /* ---- 顶栏：吸顶，保留标题 + 头像 ---- */
  .topbar {
    position: sticky; top: 0; z-index: 50;
    border-radius: 0 0 16px 16px;
    padding: 9px 14px; margin-bottom: 12px; gap: 10px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
  }
  .topbar h1 { font-size: 18px; }
  .topbar .crumb { font-size: 11.5px; }
  .topbar .tb-logo, .topbar .date-chip, .g-avatar { display: none; }

  /* ---- 底部 Tab：整条侧栏固定到屏幕底部 ---- */
  .sidebar {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; height: auto;
    flex-direction: row; align-items: stretch;
    padding: 0 0 env(safe-area-inset-bottom, 0px); gap: 0;
    background: rgba(255, 255, 255, .90);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-right: none; border-top: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 0 -8px 24px rgba(40, 30, 50, .12);
    z-index: 60; overflow: visible;
  }
  .brand, .nav-label, .side-foot { display: none; }
  .nav { flex-direction: row; margin: 0; width: 100%; gap: 0; }
  .nav-item {
    flex: 1 1 0; min-width: 0;
    flex-direction: column; justify-content: center; align-items: center;
    gap: 3px; padding: 7px 2px 6px;
    border-radius: 0; font-size: 11px; font-weight: 800;
    background: transparent; color: var(--ink-soft);
  }
  .nav-item:hover { background: transparent; transform: none; }
  .nav-item.active { background: transparent; box-shadow: none; color: var(--rose-deep); }
  .nav-item.active::before {
    left: 50%; right: auto; top: 0; transform: translateX(-50%);
    width: 26px; height: 3px; border-radius: 0 0 3px 3px;
  }
  .nav-item .ic { width: 22px; height: 22px; }
  .nav-item .tag { display: none; }
  .nav-item.disabled { opacity: .5; }
  .nav-item.disabled:hover { background: transparent; transform: none; }

  /* ---- 主内容：底部给 Tab 让出位置 ---- */
  .main { padding: 0 10px calc(72px + env(safe-area-inset-bottom, 0px)); }
  .content { padding: 16px 14px 22px; border-radius: 20px; }

  /* ---- 头像下拉：topbar 有毛玻璃会创建定位上下文，菜单用 absolute 相对 topbar ---- */
  .mn-menu { position: absolute; top: 54px; right: 0; left: auto; width: min(300px, calc(100vw - 32px)); }
  .mn-avatar { width: 40px; height: 40px; }

  .profile-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .score-hero { flex-direction: column; align-items: flex-start; gap: 12px; }
  .score-hero .right { margin-left: 0; text-align: left; }
}