/* ===== 基础变量 & 布局 ===== */
:root{
  /* 干净实底（去模糊：纯色/近白底 + 粉调变量，文字清晰锐利） */
  --bg:#f5eef3; --bg2:#fef6f9; --card:#ffffff; --card-2:#fef0f7;
  --text:#2a2230; --text2:#6b6477; --muted:#a195a6;
  --accent:#ff6f9c; --accent2:#ffe3ee; --accent-ink:#ffffff;
  --line:#f3e6ec; --danger:#e5484d; --ok:#2fa36b; --warn:#e9a23b;
  --radius:32px; --radius-s:22px; --radius-pill:999px; --shadow:0 4px 16px rgba(40,20,40,.06);
  --shadow-card:0 10px 30px -8px rgba(255,111,156,.16), 0 3px 10px rgba(40,20,40,.05);
  /* 旧变量兼容 */
  --clean-edge:0 10px 24px -8px rgba(200,80,140,.18), 0 3px 10px -4px rgba(210,100,150,.12);
  --clean-edge-hover:0 14px 28px -8px rgba(200,80,140,.22), 0 4px 14px -4px rgba(210,100,150,.15);
  --clean-border:1.5px solid rgba(255,170,205,.50);
  /* ===== 果冻卡片（不透明实底 · 字清晰 · 圆润Q弹） ===== */
  --jelly-tint:#fff0f7;
  --jelly-bg:linear-gradient(165deg,#ffffff 0%,#fff8fb 32%,#ffeef5 100%);
  --jelly-bg-soft:linear-gradient(165deg,#fffafc 0%,#fff5f9 100%);
  --jelly-bg-2:linear-gradient(165deg,#fef0f7 0%,#ffffff 100%);
  --jelly-border:1.5px solid rgba(255,170,205,.55);
  /* 立体边缘：柔投影（无 inset 高光避免冲淡文字） */
  --jelly-edge:
    0 12px 28px -10px rgba(255,100,150,.32),
    0 4px 12px -4px rgba(180,80,130,.16);
  --jelly-edge-hover:
    0 16px 36px -10px rgba(255,90,145,.40),
    0 6px 16px -4px rgba(180,80,130,.20);
  --jelly-shadow:var(--jelly-edge);
  --jelly-shadow-hover:var(--jelly-edge-hover);
  --jelly-radius:32px;
  --jelly-radius-s:22px;
  --jelly-press:cubic-bezier(.34,1.8,.5,1);
  /* 顶部光泽（仅顶部 24% 区域，不影响正文文字） */
  --jelly-gloss:linear-gradient(180deg,rgba(255,255,255,.40) 0%,rgba(255,255,255,0) 24%);
  --font: -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  --fsize:15px;
  --card-opacity:1;
  --app-bg-image:none;
  --nav-h:62px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:var(--font); font-size:var(--fsize); color:var(--text);
  background:var(--bg); overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
#appbg{position:fixed;inset:0;background-image:var(--app-bg-image);background-size:cover;background-position:center;z-index:0;pointer-events:none;opacity:var(--app-bg-opacity,1)}
#app{position:fixed;inset:0;max-width:520px;margin:0 auto;display:flex;flex-direction:column;z-index:1}
.stack{position:relative;flex:1;overflow:hidden}

/* 页面 */
.page{position:absolute;inset:0;display:flex;flex-direction:column;background:transparent;}
.page.hidden{display:none}
.page-anim{animation:slideIn .22s ease}
@keyframes slideIn{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}

.phead{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 10px;
  background:var(--jelly-bg-soft);
  border-bottom:var(--jelly-border);
  box-shadow:var(--jelly-edge);
  position:relative;z-index:5;
}
.phead .ptitle{flex:1;font-size:calc(var(--fsize)*1.1333);font-weight:700;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);position:relative;z-index:1}
.phead .pbtn{
  position:relative;min-width:36px;height:36px;border-radius:14px;border:var(--jelly-border);
  background:var(--jelly-bg);overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:var(--text);cursor:pointer;padding:0 6px;font-size:calc(var(--fsize)*0.9333);
  box-shadow:var(--jelly-edge);
  transition:transform .25s var(--jelly-press), background .2s, box-shadow .2s;
}
.phead .pbtn:active{transform:scale(.86);box-shadow:var(--jelly-edge-hover)}
.phead .pacts{display:flex;gap:2px}
.pbody{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:12px 12px calc(24px + env(safe-area-inset-bottom,0px));}
.pbody.nopad{padding:0}

/* 底部导航（3D 软糖果冻） */
.tabbar{
  flex:0 0 auto;display:flex;position:relative;
  background:var(--jelly-bg-soft);
  border-top:var(--jelly-border);
  padding-bottom:env(safe-area-inset-bottom,0px);z-index:20;
  margin:0 10px;border-radius:32px 32px 0 0;
  box-shadow:
    inset 2px -1px 4px rgba(255,255,255,.78),
    inset -1px 2px 5px rgba(170,60,100,.12),
    0 -8px 24px -6px rgba(190,70,130,.22),
    0 -3px 10px -3px rgba(150,50,100,.14);
}
.tabbar .tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:var(--nav-h);border:none;background:none;color:var(--muted);cursor:pointer;font-size:calc(var(--fsize)*0.7333);
  position:relative;border-radius:18px;margin:5px 4px;transition:transform .2s var(--jelly-press), background .2s;
}
.tabbar .tab:active{transform:scale(.88) translateY(1px)}
.tabbar .tab .ic{width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:calc(var(--fsize)*1.3333);transition:transform .15s}
.tabbar .tab .ic img{width:24px;height:24px;object-fit:cover;border-radius:8px}
.tabbar .tab .ic svg{width:23px;height:23px}
.tabbar .tab.on{
  color:var(--accent);font-weight:700;
  background:var(--jelly-bg);overflow:hidden;
  border-radius:20px;margin:5px 4px;
  box-shadow:var(--jelly-edge);
  border:var(--jelly-border);
}
.tabbar .tab.on .ic{transform:translateY(-2px)}

/* 覆盖层 */
.layer{position:fixed;inset:0;z-index:100;pointer-events:none;max-width:520px;margin:0 auto}
.layer>*{pointer-events:auto}
.toast-wrap{position:fixed;left:0;right:0;bottom:120px;z-index:9999;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}

/* 通用文本 */
.muted{color:var(--muted)}
.small{font-size:calc(var(--fsize)*0.8)}
.big{font-size:calc(var(--fsize)*1.3333);font-weight:700}
.center{text-align:center}
.row{display:flex;align-items:center;gap:8px}
.row.wrap{flex-wrap:wrap}
.grow{flex:1}
.right{margin-left:auto}
.hide{display:none !important}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}
.empty{padding:38px 14px;text-align:center;color:var(--muted);font-size:calc(var(--fsize)*0.8667);line-height:1.9}
.empty .e-ic{font-size:calc(var(--fsize)*2);display:block;width:74px;height:74px;line-height:74px;margin:0 auto 12px;border-radius:50%;background:var(--accent2);opacity:.95;box-shadow:0 6px 16px -6px var(--accent2)}

/* 滚动条（桌面） */
.pbody::-webkit-scrollbar,.sheet-body::-webkit-scrollbar{width:5px;height:5px}
.pbody::-webkit-scrollbar-thumb,.sheet-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.14);border-radius:4px}

/* 侧栏布局（笔记/学习）· 清新药丸 */
.sidelayout{display:flex;height:100%}
.sidebar{
  flex:0 0 118px;
  background:var(--jelly-bg-soft);position:relative;
  border-right:var(--jelly-border);
  overflow-y:auto;padding:10px 0 70px;
  box-shadow:6px 0 22px -10px rgba(190,70,130,.16);
}
.sidebar .sitem{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:10px 6px;text-align:center;color:var(--text);cursor:pointer;
  border-radius:18px;margin:6px 8px;line-height:1.2;
  background:transparent;
  transition:background .18s, transform .22s var(--jelly-press), box-shadow .18s;
}
.sidebar .sitem .sic{font-size:calc(var(--fsize)*1.4667);line-height:1;margin-bottom:4px}
.sidebar .sitem .scn{
  font-size:calc(var(--fsize)*0.84);font-weight:600;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sidebar .sitem .snum{
  font-size:calc(var(--fsize)*0.6667);font-weight:500;color:var(--muted);margin-top:3px;
  background:rgba(0,0,0,.05);padding:1px 6px;border-radius:999px;line-height:1.3;
}
.sidebar .sitem.on{
  background:linear-gradient(135deg,var(--accent),#ff8ab8);
  color:#fff;font-weight:700;
  box-shadow:0 6px 16px -5px rgba(255,111,156,.45);
}
.sidebar .sitem.on .snum{background:rgba(255,255,255,.22);color:#fff}
.sidebar .sitem:active{transform:scale(.94)}
.sidebar .sadd{
  margin:6px 8px;padding:9px 0;border-radius:16px;text-align:center;
  color:var(--text);font-size:calc(var(--fsize)*0.84);font-weight:600;cursor:pointer;
  background:var(--jelly-bg);border:var(--jelly-border);
  box-shadow:var(--jelly-edge);
  transition:transform .22s var(--jelly-press), box-shadow .18s;
}
.sidebar .sadd:active{transform:scale(.94)}
.sidecontent{flex:1;overflow-y:auto;padding:12px 12px 90px}