:root{
  --bg:#F0F0F3;
  --card-bg:#F0F0F3;
  --text-main:#1f2937;
  --text-sub:#6B7280;
  --blue:#5B7CF5;
  --blue-light:#8AA4FF;
  --blue-pale:#E8EFFF;
  --orange:#FF922B;
  --green:#2F9E44;
  --red:#FF6B6B;
  --red-pale:#FFE8E8;
  --pink-bg:#FFF0F0;
  --shadow-dark:#d1d9e6;
  --shadow-light:#ffffff;
  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:24px;
  --radius-xl:40px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{font-size:16px;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  background:#e0e5ec;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  min-height:100vh;
  padding:20px;
  line-height:1.5;
  color:var(--text-main);
}

.phone{
  width:375px;
  min-height:812px;
  background:var(--bg);
  border-radius:var(--radius-xl);
  box-shadow:20px 20px 60px #b8b9be,-20px -20px 60px #ffffff;
  position:relative;
  display:flex;
  flex-direction:column;
}

.scroll{flex:1;overflow-y:auto;padding:0 24px 110px;}
.scroll::-webkit-scrollbar{display:none;}

/* ===== 状态栏与顶部导航 ===== */
.status-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 24px 0;font-size:14px;font-weight:600;color:var(--text-main);
}
.status-right{display:flex;align-items:center;gap:5px;}
.battery{width:22px;height:11px;border:1.5px solid var(--text-main);border-radius:3px;position:relative;}
.battery::after{content:'';position:absolute;right:-3px;top:3px;width:2px;height:5px;background:var(--text-main);border-radius:0 1px 1px 0;}
.battery-inner{width:70%;height:100%;background:var(--text-main);border-radius:1px;}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px 0;min-height:64px;
}
.page-title{font-size:18px;font-weight:700;color:var(--text-main);}
.page-sub{font-size:13px;color:var(--text-sub);margin-top:2px;}

/* ===== 新拟态工具类 ===== */
.n-raised{
  background:var(--card-bg);
  border-top:1px solid rgba(255,255,255,.6);
  box-shadow:7px 7px 15px var(--shadow-dark),-7px -7px 15px var(--shadow-light),inset 1px 1px 1px rgba(255,255,255,.35);
}
.n-inset{
  background:var(--card-bg);
  box-shadow:inset 4px 4px 8px var(--shadow-dark),inset -4px -4px 8px var(--shadow-light);
}
.n-press{transition:box-shadow .18s ease,transform .18s ease;cursor:pointer;user-select:none;}
.n-press:active{
  transform:scale(.97);
  box-shadow:inset 5px 5px 10px var(--shadow-dark),inset -5px -5px 10px var(--shadow-light);
}

/* ===== 按钮 ===== */
.n-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 24px;border-radius:var(--radius-lg);
  font-size:16px;font-weight:600;
  transition:box-shadow .18s ease,transform .18s ease;cursor:pointer;user-select:none;
}
.n-btn-primary{
  background:linear-gradient(135deg,var(--blue-light),var(--blue));
  color:#fff;
  box-shadow:6px 6px 16px rgba(91,124,245,.35),-4px -4px 12px rgba(255,255,255,.3),inset 1px 1px 1px rgba(255,255,255,.35);
}
.n-btn-primary:active{
  transform:scale(.98);
  box-shadow:inset 4px 4px 9px rgba(91,124,245,.45),inset -4px -4px 9px rgba(255,255,255,.35);
}
.n-btn-secondary{
  background:var(--card-bg);
  color:var(--blue);
  border-top:1px solid rgba(255,255,255,.6);
  box-shadow:5px 5px 12px var(--shadow-dark),-5px -5px 12px var(--shadow-light),inset 1px 1px 1px rgba(255,255,255,.35);
}
.n-btn-secondary:active{box-shadow:inset 4px 4px 8px var(--shadow-dark),inset -4px -4px 8px var(--shadow-light);}

.n-icon-btn{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--card-bg);
  border-top:1px solid rgba(255,255,255,.6);
  box-shadow:5px 5px 10px var(--shadow-dark),-5px -5px 10px var(--shadow-light),inset 1px 1px 1px rgba(255,255,255,.35);
  transition:box-shadow .18s ease,transform .18s ease;cursor:pointer;
}
.n-icon-btn:active{transform:scale(.95);box-shadow:inset 4px 4px 8px var(--shadow-dark),inset -4px -4px 8px var(--shadow-light);}
.n-icon-btn svg{width:22px;height:22px;stroke:var(--text-main);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

.n-fab{
  position:absolute;right:22px;bottom:100px;
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--blue-light),var(--blue));
  color:#fff;
  box-shadow:6px 6px 18px rgba(91,124,245,.4),-4px -4px 10px rgba(255,255,255,.3);
}
.n-fab svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}

/* ===== 卡片 ===== */
.n-card{
  border-radius:var(--radius-lg);
  padding:18px;
  background:var(--card-bg);
  border-top:1px solid rgba(255,255,255,.6);
  box-shadow:7px 7px 15px var(--shadow-dark),-7px -7px 15px var(--shadow-light),inset 1px 1px 1px rgba(255,255,255,.35);
}
.n-card-inset{
  border-radius:var(--radius-lg);
  padding:18px;
  background:var(--card-bg);
  box-shadow:inset 4px 4px 8px var(--shadow-dark),inset -4px -4px 8px var(--shadow-light);
}

/* ===== 输入框 ===== */
.n-search{
  display:flex;align-items:center;gap:10px;
  padding:13px 16px;border-radius:var(--radius-lg);
  background:var(--card-bg);
  box-shadow:inset 4px 4px 8px var(--shadow-dark),inset -4px -4px 8px var(--shadow-light);
}
.n-search svg{width:20px;height:20px;stroke:var(--text-sub);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.n-search input{border:none;background:transparent;outline:none;font-size:15px;color:var(--text-main);flex:1;font-family:inherit;}
.n-search input::placeholder{color:var(--text-sub);}

/* ===== 分段 Tab /  pills ===== */
.n-segment{
  display:flex;gap:6px;padding:6px;border-radius:var(--radius-lg);
  background:var(--card-bg);
  border-top:1px solid rgba(255,255,255,.6);
  box-shadow:5px 5px 10px var(--shadow-dark),-5px -5px 10px var(--shadow-light),inset 1px 1px 1px rgba(255,255,255,.35);
}
.n-segment .pill{
  flex:1;text-align:center;padding:9px 6px;border-radius:var(--radius-md);
  font-size:14px;font-weight:600;color:var(--text-sub);cursor:pointer;transition:all .2s;
}
.n-segment .pill.active{
  background:linear-gradient(135deg,var(--blue-light),var(--blue));
  color:#fff;
  box-shadow:3px 3px 8px rgba(91,124,245,.35),-2px -2px 6px rgba(255,255,255,.3);
}

/* ===== 底部导航 ===== */
.n-tabbar{
  position:absolute;bottom:20px;left:22px;right:22px;height:72px;border-radius:var(--radius-lg);
  display:flex;align-items:center;justify-content:space-around;padding:0 8px;
  background:var(--card-bg);
  border-top:1px solid rgba(255,255,255,.6);
  box-shadow:8px 8px 16px var(--shadow-dark),-8px -8px 16px var(--shadow-light),inset 1px 1px 1px rgba(255,255,255,.35);
}
.n-tab{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;}
.n-tab svg{width:24px;height:24px;stroke:#9CA3AF;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.n-tab span{font-size:11px;color:#9CA3AF;margin-top:2px;}
.n-tab.active svg{stroke:var(--blue);}
.n-tab.active span{color:var(--blue);font-weight:600;}

/* ===== 进度环 ===== */
.n-progress-ring{
  width:220px;height:220px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;position:relative;
}
.n-progress-ring .inner{
  width:180px;height:180px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;position:relative;
  box-shadow:inset 6px 6px 12px var(--shadow-dark),inset -6px -6px 12px var(--shadow-light);
}
.n-progress-ring svg{position:absolute;top:0;left:0;width:220px;height:220px;transform:rotate(-90deg);}
.n-progress-ring circle{fill:none;}
.n-progress-ring .track{stroke:#E5E7EB;stroke-width:14;}
.n-progress-ring .bar{stroke:var(--blue);stroke-width:14;stroke-linecap:round;stroke-dasharray:0 691.15;transition:stroke-dasharray 1s ease;}

.n-ring-score{
  width:110px;height:110px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;position:relative;
}
.n-ring-score .inner{
  width:86px;height:86px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;position:relative;
  box-shadow:inset 4px 4px 8px var(--shadow-dark),inset -4px -4px 8px var(--shadow-light);
}
.n-ring-score svg{position:absolute;top:0;left:0;width:110px;height:110px;transform:rotate(-90deg);}
.n-ring-score circle{fill:none;}
.n-ring-score .track{stroke:#E5E7EB;stroke-width:10;}
.n-ring-score .bar{stroke:var(--blue);stroke-width:10;stroke-linecap:round;stroke-dasharray:0 345.58;transition:stroke-dasharray 1s ease;}

/* ===== 进度条 ===== */
.n-progress-track{
  height:8px;border-radius:4px;overflow:hidden;
  background:var(--card-bg);
  box-shadow:inset 3px 3px 6px var(--shadow-dark),inset -3px -3px 6px var(--shadow-light);
}
.n-progress-fill{height:100%;border-radius:4px;background:var(--blue);}

/* ===== 列表项 ===== */
.n-list-item{
  display:flex;align-items:center;gap:14px;
  padding:16px;border-radius:var(--radius-lg);
  background:var(--card-bg);
  border-top:1px solid rgba(255,255,255,.6);
  box-shadow:6px 6px 12px var(--shadow-dark),-6px -6px 12px var(--shadow-light),inset 1px 1px 1px rgba(255,255,255,.35);
}

.n-media-item{
  display:flex;gap:12px;padding:16px;border-radius:var(--radius-lg);
  background:var(--card-bg);
  border-top:1px solid rgba(255,255,255,.6);
  box-shadow:6px 6px 12px var(--shadow-dark),-6px -6px 12px var(--shadow-light),inset 1px 1px 1px rgba(255,255,255,.35);
}
.n-media-item .avatar{
  width:48px;height:48px;border-radius:50%;
  background:var(--card-bg);
  border-top:1px solid rgba(255,255,255,.6);
  box-shadow:4px 4px 8px var(--shadow-dark),-4px -4px 8px var(--shadow-light);
  overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.n-media-item .avatar svg{width:28px;height:28px;stroke:var(--blue);fill:none;stroke-width:1.8;}

/* ===== 图标徽章 ===== */
.n-icon-box{
  width:50px;height:50px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  background:var(--card-bg);
  border-top:1px solid rgba(255,255,255,.6);
  box-shadow:4px 4px 8px var(--shadow-dark),-4px -4px 8px var(--shadow-light);
  font-size:20px;font-weight:700;color:var(--blue);
}
.n-icon-box svg{width:24px;height:24px;stroke:var(--blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* ===== 装饰素材图片（新拟态立体浮框） ===== */
.n-deco-wrap{
  display:flex;justify-content:center;align-items:center;
  padding:12px;border-radius:var(--radius-lg);
  background:var(--card-bg);
  border-top:1px solid rgba(255,255,255,.6);
  box-shadow:7px 7px 15px var(--shadow-dark),-7px -7px 15px var(--shadow-light),inset 1px 1px 1px rgba(255,255,255,.35);
  margin-bottom:12px;overflow:hidden;
}
.n-deco-wrap img{
  display:block;width:100%;height:auto;
  border-radius:var(--radius-sm);
  object-fit:contain;
  mix-blend-mode:multiply;
}
.n-deco-sm{
  display:inline-flex;justify-content:center;align-items:center;
  width:60px;height:60px;border-radius:50%;
  background:var(--card-bg);
  border-top:1px solid rgba(255,255,255,.6);
  box-shadow:5px 5px 10px var(--shadow-dark),-5px -5px 10px var(--shadow-light),inset 1px 1px 1px rgba(255,255,255,.35);
  overflow:hidden;flex-shrink:0;
}
.n-deco-sm img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;}
.n-deco-tiny{
  display:inline-flex;justify-content:center;align-items:center;
  width:48px;height:48px;border-radius:50%;
  background:var(--card-bg);
  border-top:1px solid rgba(255,255,255,.6);
  box-shadow:4px 4px 8px var(--shadow-dark),-4px -4px 8px var(--shadow-light);
  overflow:hidden;flex-shrink:0;
}
.n-deco-tiny img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;}

/* ===== 社区帖子配图 ===== */
.post-img{
  margin:12px 0 0;border-radius:var(--radius-md);
  background:var(--card-bg);
  border-top:1px solid rgba(255,255,255,.6);
  box-shadow:inset 3px 3px 6px var(--shadow-dark),inset -3px -3px 6px var(--shadow-light);
  overflow:hidden;display:flex;
}
.post-img img{
  display:block;width:100%;height:140px;
  object-fit:cover;border-radius:var(--radius-md);
  mix-blend-mode:multiply;
}

.s-icon-img{mix-blend-mode:multiply;}

.n-letter-icon{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--blue-light),var(--blue));
  color:#fff;font-size:18px;font-weight:700;
  box-shadow:3px 3px 8px rgba(91,124,245,.35);
}

.n-book-icon{
  width:54px;height:64px;border-radius:8px 10px 10px 8px;
  overflow:hidden;position:relative;
  box-shadow:4px 4px 10px rgba(91,124,245,.35);
  flex-shrink:0;
}
.n-book-icon::after{
  content:'';position:absolute;left:6px;top:4px;bottom:4px;width:3px;background:rgba(255,255,255,.4);border-radius:2px;z-index:1;
}
.book-cover-img{
  width:100%;height:100%;object-fit:cover;display:block;
}

.n-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:12px;
  background:var(--blue-pale);color:var(--blue);
  font-size:12px;font-weight:600;
}

.n-avatar{
  width:64px;height:64px;border-radius:50%;
  background:var(--card-bg);
  border-top:1px solid rgba(255,255,255,.6);
  box-shadow:6px 6px 12px var(--shadow-dark),-6px -6px 12px var(--shadow-light);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.n-avatar img,.n-avatar svg{width:100%;height:100%;object-fit:cover;}
.n-avatar svg{width:32px;height:32px;stroke:#9CA3AF;fill:none;stroke-width:2;}

/* ===== 开关 ===== */
.n-toggle{
  width:50px;height:30px;border-radius:15px;position:relative;cursor:pointer;
  background:var(--card-bg);
  box-shadow:inset 3px 3px 6px var(--shadow-dark),inset -3px -3px 6px var(--shadow-light);
}
.n-toggle::after{
  content:'';position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;box-shadow:2px 2px 5px rgba(0,0,0,.12);
  transition:transform .25s ease;
}
.n-toggle.on{background:var(--blue);}
.n-toggle.on::after{transform:translateX(20px);}

/* ===== 图表 ===== */
.n-chart{
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;height:110px;padding-top:10px;
}
.n-chart .bar{
  flex:1;border-radius:6px 6px 0 0;
  background:var(--card-bg);
  box-shadow:inset 3px 3px 6px var(--shadow-dark),inset -3px -3px 6px var(--shadow-light);
  position:relative;overflow:hidden;
}
.n-chart .bar span{
  position:absolute;left:2px;right:2px;bottom:2px;border-radius:5px;
  background:linear-gradient(180deg,var(--blue-light),var(--blue));
}
.n-chart .bar label{
  position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);
  font-size:11px;color:var(--text-sub);
}
.n-chart .bar val{
  position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  font-size:10px;color:var(--blue);font-weight:600;
}

/* ===== 日历 ===== */
.n-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;text-align:center;}
.n-calendar .weekday{font-size:12px;color:var(--text-sub);font-weight:600;padding:4px 0;}
.n-calendar .day{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;color:var(--text-main);border-radius:50%;
  background:var(--card-bg);
  border-top:1px solid rgba(255,255,255,.6);
  box-shadow:3px 3px 6px var(--shadow-dark),-3px -3px 6px var(--shadow-light);
}
.n-calendar .day.done{
  background:linear-gradient(135deg,var(--blue-light),var(--blue));color:#fff;
  box-shadow:3px 3px 8px rgba(91,124,245,.35);
}
.n-calendar .day.today{box-shadow:0 0 0 2px var(--blue),3px 3px 6px var(--shadow-dark),-3px -3px 6px var(--shadow-light);}
.n-calendar .day.other{color:var(--text-sub);box-shadow:none;background:transparent;}

/* ===== 声波 ===== */
.n-waveform{
  display:flex;align-items:center;justify-content:center;gap:3px;height:54px;
  padding:0 16px;border-radius:var(--radius-lg);
  background:var(--card-bg);
  border-top:1px solid rgba(255,255,255,.6);
  box-shadow:inset 3px 3px 6px var(--shadow-dark),inset -3px -3px 6px var(--shadow-light);
}
.n-waveform span{
  width:3px;border-radius:2px;background:var(--blue-light);
  animation:wave 1.2s ease-in-out infinite;
}
@keyframes wave{0%,100%{height:8px}50%{height:36px}}

/* ===== 入场动画 ===== */
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise{animation:riseIn .5s ease both;}
.d1{animation-delay:.05s}.d2{animation-delay:.1s}.d3{animation-delay:.15s}.d4{animation-delay:.2s}.d5{animation-delay:.25s}.d6{animation-delay:.3s}

/* ===== 小工具 ===== */
.text-blue{color:var(--blue)}
.text-sub{color:var(--text-sub)}
.text-green{color:var(--green)}
.text-red{color:var(--red)}
.text-orange{color:var(--orange)}
.fw-700{font-weight:700}
.fs-12{font-size:12px}.fs-13{font-size:13px}.fs-14{font-size:14px}.fs-15{font-size:15px}.fs-16{font-size:16px}.fs-18{font-size:18px}.fs-20{font-size:20px}.fs-24{font-size:24px}.fs-32{font-size:32px}.fs-40{font-size:40px}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}
.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.flex-1{flex:1}