/* 基础：设计变量、页面容器、视图切换（原 index.html 第 10-102 行） */

/* ============================================================
   设计基调：iOS 液态风格（无玻璃/毛玻璃）
   白底 + 黑灰白配色；圆润胶囊、液态有机形、柔和阴影、弹性动效
 12 |    ============================================================ */
:root{
  --bg:        #FFFFFF;
  --ink:       #0B0B0F;
  --gray-1:    #6C6C70;
  --gray-2:    #8E8E93;
  --gray-3:    #B4B4BA;
  --fill:      #F2F2F7;
  --hairline:  rgba(11,11,15,.07);
  --spring:    cubic-bezier(.34,1.56,.64,1);
  --ease-out:  cubic-bezier(.25,1,.4,1);
  --font-body: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  --font-num:  "Outfit", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  --danger:    #FF3B30;
  --primary:   #DADAE0;
  --head-top:  4px;       /* 所有子页面顶栏距顶部的距离（改这里统一生效） */
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; overscroll-behavior:none; }
body{
  margin:0;
  /* 固定页面：上下滑不会把整个网页拖出屏幕 */
  position:fixed; inset:0; width:100%;
  overflow:hidden;
  touch-action:manipulation;
  background:#ECECEF;
  font-family:var(--font-body);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex;
  align-items:center;
  justify-content:center;
}
:focus-visible{ outline:2px solid rgba(11,11,15,.55); outline-offset:2px; border-radius:6px; }
button{ font-family:inherit; }

/* ============ 应用外壳：桌面端居中收窄、移动端全屏 ============ */
.app{
  position:relative;
  width:min(440px, 100vw);
  height:min(820px, 100dvh);
  background:var(--bg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding-top:env(safe-area-inset-top);
}
@media (min-width:769px){
  .app{
    border-radius:42px;
    box-shadow:0 34px 90px -24px rgba(0,0,0,.28), 0 10px 28px -14px rgba(0,0,0,.14);
  }
}

/* ============ 铺满页面：去掉外壳留白与圆角（显示与字体页可开关） ============ */
html.fill-page, html.fill-page body{
  width:100%; height:100%;
  min-height:100dvh;
  overflow:hidden;
}
html.fill-page body{
  background:var(--bg);
  align-items:stretch;
  justify-content:stretch;
}
html.fill-page .app{
  width:100vw;
  height:100dvh;
  max-width:none; max-height:none;
}
@media (min-width:769px){
  html.fill-page .app{ border-radius:0; box-shadow:none; }
}

/* ============ 视图容器 ============ */
.view{
  flex:1;
  min-height:0;
  display:none;
}
.view.active{
  display:flex;
  flex-direction:column;
  animation:viewIn .32s var(--ease-out) both;
}
@keyframes viewIn{
  from{ opacity:0; transform:translateY(12px); }
  to  { opacity:1; transform:none; }
}