/* ============================================================
   应用外壳：设备框 / 状态栏 / 导航 / 路由容器 / 底部操作栏 / 提示
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  /* 关掉双击放大，点按不再有 300ms 迟疑 */
  touch-action:manipulation;
}
body{
  margin:0;
  overflow-x:hidden;
  min-height:100vh;
  min-height:100dvh;
  font-family:var(--font);
  color:var(--ink);
  background:#07080E;
  background-image:
    radial-gradient(60% 45% at 50% -5%, var(--pg1), transparent 70%),
    radial-gradient(40% 30% at 88% 18%, var(--pg2), transparent 70%);
  display:flex;
  justify-content:center;
  padding:28px 16px 56px;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
button{font:inherit;color:inherit;background:none;border:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul,ol{list-style:none}
p,h1,h2,h3{margin:0}
:focus-visible{outline:2px solid var(--a2);outline-offset:2px;border-radius:6px}

/* ---------- 桌面演示舞台 ---------- */
.stage{width:100%;max-width:430px;display:flex;flex-direction:column;align-items:center;gap:18px}
.pagehead{width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 2px}
.pagehead h2{font-size:14.5px;font-weight:700;letter-spacing:.3px;color:rgba(255,255,255,.92)}
.pagehead h2 i{
  font-style:normal;display:inline-block;margin-left:7px;
  font-size:9.5px;font-weight:700;letter-spacing:.6px;
  padding:2px 6px;border-radius:5px;
  background:rgba(76,141,255,.16);border:1px solid rgba(76,141,255,.4);color:#93BEFF;
  vertical-align:2px;
}
.pagehead p{font-size:11px;letter-spacing:.2px;color:rgba(255,255,255,.38);white-space:nowrap}

/* ---------- 设备外框（仅桌面） ---------- */
.device{
  position:relative;width:390px;height:844px;flex:none;
  border-radius:48px;padding:10px;
  background:linear-gradient(160deg,#33384C 0%,#14161F 42%,#0B0C12 100%);
  box-shadow:
    0 46px 90px -26px rgba(0,0,0,.95),
    0 0 0 1px rgba(255,255,255,.09),
    inset 0 0 0 1px rgba(255,255,255,.05);
}
.app{
  position:absolute;inset:10px;
  border-radius:39px;
  overflow:hidden;
  display:flex;flex-direction:column;
  isolation:isolate;
  background:var(--app-bg);
  /* 主题底色是多层渐变，本身不可插值；去掉过渡，换页直接落地，省掉无意义的重绘 */
}

/* 环境光层 */
.bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.bg::before{
  content:"";position:absolute;inset:-10%;
  background-image:
    linear-gradient(var(--grid-c) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-c) 1px,transparent 1px);
  background-size:29px 29px;
  -webkit-mask-image:radial-gradient(66% 52% at 50% 22%,#000 0%,transparent 76%);
  mask-image:radial-gradient(66% 52% at 50% 22%,#000 0%,transparent 76%);
}
/* 彩色光晕层：用两层径向渐变直接画柔软过渡，
   原来靠 conic-gradient + filter:blur(34px) 做柔化，那块 150%×56% 的大图层
   会一直挂着 GPU 滤镜，滚动时每帧都要重算，是首页/子页卡顿的头号元凶 */
.bg::after{
  content:"";position:absolute;left:-30%;top:-22%;width:150%;height:56%;
  background:
    radial-gradient(44% 62% at 30% 48%, var(--glow-a,rgba(34,211,238,.12)), transparent 72%),
    radial-gradient(48% 66% at 64% 42%, var(--glow-b,rgba(139,92,246,.14)), transparent 74%);
  opacity:.9;
}

/* 首页照片背景层（data 由路由按页设置） */
.bg-image{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-size:cover;
  background-position:center bottom;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity .35s ease;
}
.bg-image.is-on{opacity:1}
/* 左上 + 底部压暗，保证文字与图标对比度，同时不糊住右侧光环。
   这一层是固定暗角，不随滚动变化（滚动压暗见下面的 .scrim） */
.bg-image::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(125% 62% at 0% 2%, rgba(4,8,30,.62), rgba(4,8,30,.20) 52%, rgba(4,8,30,0) 76%),
    linear-gradient(180deg, rgba(4,8,30,.40) 0%, rgba(4,8,30,0) 20%, rgba(4,8,30,0) 58%, rgba(4,8,30,.55) 100%);
}
/* 滚动压暗层：往下读内容时把背景实拍图压下去，保证正文对比度。
   只改 opacity 并提前提升为合成层，滚动时不再重绘整块全屏色 */
.scrim{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:#04081F;opacity:0;
  will-change:opacity;
}
.app.has-photo .scrim{opacity:var(--scrim,0)}

/* 有照片时弱化网格与彩色光晕，避免和实拍图打架 */
.app.has-photo .bg::before{opacity:0}
.app.has-photo .bg::after{opacity:.28}
body.has-photo{background:#070B26}

/* ---------- 状态栏（仅桌面演示显示，真机由系统绘制） ---------- */
.statusbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px 2px;
  font-size:13.5px;font-weight:600;letter-spacing:.3px;
  color:rgba(255,255,255,.94);
  font-variant-numeric:tabular-nums;
}
.sb-icons{display:flex;align-items:center;gap:5px}
.statusbar svg{display:block}

/* ---------- 顶部导航（固定，不随内容滚动） ----------
   原来这里挂了 backdrop-filter:blur(20px) saturate(160%)。
   但导航栏是 .app 的 flex 兄弟节点，内容区不会从它下面滚过去，
   模糊的只是身后那层静止的背景渐变 —— 看不出差别，却要每帧重算一次全宽模糊。
   现在改成「半透明底色 + 顶部高光」，观感几乎一致，滚动零成本。 */
.appbar{
  position:relative;z-index:12;flex:none;
  padding-top:var(--safe-t);
  border-bottom:1px solid transparent;
}
.appbar[data-variant="sub"]{
  background:var(--bar-tint);
  border-bottom-color:rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.appbar.is-scrolled{
  background:var(--bar-tint-solid);
  border-bottom-color:rgba(255,255,255,.07);
}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 16px 10px}
.navbar--home{padding:6px 16px 6px}
.apptitle{
  font-size:17px;font-weight:600;letter-spacing:.8px;
  color:rgba(255,255,255,.96);
  text-shadow:0 1px 10px rgba(4,10,40,.5);
}
.navbar--sub{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:6px 14px 10px}
.back{
  position:relative;
  width:40px;height:40px;flex:none;
  justify-self:start;
  display:grid;place-items:center;
  border-radius:13px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
  color:rgba(255,255,255,.86);
  cursor:pointer;
  touch-action:manipulation;
  transition:background .2s,border-color .2s,transform .15s;
}
/* 视觉 40px，热区补到 48px，满足移动端触控规范 */
.back::after{content:"";position:absolute;inset:-4px;border-radius:16px}
.back:active{transform:scale(.94);background:rgba(255,255,255,.15)}
.nav-title{
  font-size:16px;font-weight:700;letter-spacing:.6px;
  color:rgba(255,255,255,.96);white-space:nowrap;
  animation:titleIn .3s var(--ease) both;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-logo{
  width:40px;height:40px;flex:none;
  padding:4px;border-radius:13px;background:#fff;
  object-fit:contain;
  box-shadow:0 4px 14px rgba(4,10,30,.5);
}
.brand-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.brand-txt b{font-size:13.5px;font-weight:700;letter-spacing:.2px;color:rgba(255,255,255,.95);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-txt span{font-size:10px;letter-spacing:.3px;color:var(--ink-3)}

/* ---------- 路由容器 ---------- */
.viewport{position:relative;z-index:1;flex:1;min-height:0;overflow:hidden}

/* 每个页面独立滚动：返回时能回到原位置。
   页面切换不再做任何位移动画（ycc 要求取消「侧移滑出」效果）：
   两页在同一帧里替换完成，不等过渡、不留合成层，换页就是「直接到位」 */
.view{
  position:absolute;inset:0;
  overflow-y:auto;overflow-x:hidden;
  /* 只允许纵向滚动：禁止双指缩放与横向拖拽 */
  touch-action:pan-y;
  overscroll-behavior:contain;
  scrollbar-width:none;
  padding:14px 16px calc(24px + var(--safe-b));
  padding-left:calc(16px + var(--safe-l));
  padding-right:calc(16px + var(--safe-r));
}
.view::-webkit-scrollbar{display:none}

/* 交互元素：不弹 iOS 长按菜单、不出现拖拽选中框；正文保持可选中复制 */
.entry,.att-card,.btn,.back,.att-tag,.fdel,.drop,.tbl,.assoc-tag,.fitem,
.d-att,.d-drop,.d-pick,.d-submit{
  -webkit-touch-callout:none;
  -webkit-user-select:none;user-select:none;
}
img{-webkit-user-drag:none;user-drag:none}

/* 首次进入的入场动画，仅播放一次（返回缓存页不再闪）。
   backwards 而不是 both：动画结束后立刻回到正常流，不把元素永久留在合成层上 */
.view.is-fresh > *{animation:rise .4s var(--ease) backwards}
.view.is-fresh > *:nth-child(1){animation-delay:0s}
.view.is-fresh > *:nth-child(2){animation-delay:.05s}
.view.is-fresh > *:nth-child(3){animation-delay:.1s}
.view.is-fresh > *:nth-child(4){animation-delay:.14s}
.view.is-fresh > *:nth-child(5){animation-delay:.18s}

/* ---------- 底部固定操作栏 ----------
   同理：操作栏也是 flex 兄弟节点，内容不会滚到它下面，
   backdrop-filter 只是在模糊静止背景 —— 去掉，用近乎不透明的渐变顶住 */
.actionbar{
  position:relative;z-index:15;flex:none;
  display:flex;align-items:center;gap:14px;
  padding:10px 16px calc(10px + var(--safe-b));
  padding-left:calc(16px + var(--safe-l));
  padding-right:calc(16px + var(--safe-r));
  background:linear-gradient(to top,var(--bar-tint-solid),var(--bar-tint));
  border-top:1px solid rgba(255,255,255,.08);
  box-shadow:0 -10px 24px -18px rgba(0,0,0,.9);
}
.actionbar[hidden]{display:none}
.ab-meta{flex:none;display:flex;flex-direction:column;gap:3px;max-width:96px}
.ab-meta span{font-size:10px;letter-spacing:.3px;color:var(--ink-4)}
.ab-meta b{font-size:12.5px;font-weight:700;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.actionbar .btn{flex:1;height:46px}

/* ---------- 主按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);
  width:100%;
  border:none;border-radius:var(--r-md);
  font-size:15px;font-weight:700;letter-spacing:.8px;
  color:var(--btn-ink);
  background:linear-gradient(100deg,var(--a1),var(--a2));
  box-shadow:0 15px 30px -14px var(--a2);
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .16s var(--ease),box-shadow .2s,opacity .2s,background .25s,color .25s;
}
.btn:active{transform:scale(.985)}
.btn:disabled{
  background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.4);
  box-shadow:none;cursor:not-allowed;transform:none;
}
.btn[data-loading]{pointer-events:none;opacity:.85}
.spin{
  width:14px;height:14px;flex:none;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:currentColor;
  animation:spin .7s linear infinite;
}

/* ---------- toast ---------- */
.toast{
  position:absolute;left:50%;z-index:40;
  bottom:calc(86px + var(--safe-b));
  transform:translate(-50%,14px);
  max-width:calc(100% - 40px);
  padding:11px 16px;border-radius:14px;
  background:var(--bar-tint-solid);
  border:1px solid var(--accent-bd);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.9);
  font-size:12.5px;line-height:1.5;letter-spacing:.2px;
  text-align:center;
  color:var(--accent-ink);
  opacity:0;pointer-events:none;
  transition:opacity .24s,transform .24s var(--ease);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- 结果浮层 ---------- */
.overlay{
  position:absolute;inset:0;z-index:50;
  display:grid;place-items:center;
  padding:24px;
  background:rgba(4,6,20,.62);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  animation:fade .22s ease both;
}
.overlay:focus{outline:none}
.overlay-card{
  width:100%;max-width:280px;
  padding:24px 20px 18px;border-radius:22px;
  background:linear-gradient(160deg,rgba(30,34,72,.98),rgba(16,18,44,.98));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.9);
  text-align:center;
  animation:pop .32s var(--ease) both;
}
.ok-ico{
  width:52px;height:52px;margin:0 auto 14px;
  border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--a1),var(--a2));
  box-shadow:0 12px 26px -12px var(--a2);
  color:#fff;
}
.overlay-card b{display:block;font-size:17px;font-weight:700;letter-spacing:.5px}
.overlay-card p{margin-top:8px;font-size:12px;line-height:1.7;color:var(--ink-3)}
.overlay-card .btn{margin-top:18px;height:44px;font-size:14px}
.btn-ghost{
  margin-top:18px;width:100%;height:44px;
  border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  font-size:14px;font-weight:600;letter-spacing:.6px;
  color:rgba(255,255,255,.9);
  touch-action:manipulation;
}
.btn-ghost:active{background:rgba(255,255,255,.14)}

/* ---------- 桌面：home indicator + 说明卡 ---------- */
.homebar{
  position:absolute;left:50%;bottom:9px;transform:translateX(-50%);
  width:134px;height:5px;border-radius:3px;
  background:rgba(255,255,255,.5);
  z-index:60;pointer-events:none;
}
.notes{
  width:100%;border-radius:16px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
  padding:16px 17px 15px;
}
.notes h3{font-size:11.5px;font-weight:700;letter-spacing:1.2px;color:rgba(255,255,255,.5);text-transform:uppercase;margin-bottom:11px}
.notes ul{display:flex;flex-direction:column;gap:9px}
.notes li{display:flex;gap:9px;font-size:11.5px;line-height:1.6;letter-spacing:.2px;color:rgba(255,255,255,.55)}
.notes li b{flex:none;font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--accent);padding-top:1.5px;min-width:24px}
.notes .route{
  margin-top:13px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);
  font-size:10.5px;line-height:1.7;letter-spacing:.2px;color:rgba(255,255,255,.34);
}
.notes .route code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;padding:1px 5px;border-radius:4px;
  background:rgba(255,255,255,.08);color:var(--accent);
}

/* ---------- 动画 ---------- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes titleIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

@media (max-height:940px) and (min-width:561px) and (pointer:fine){
  .device{transform:scale(.92);transform-origin:top center;margin-bottom:-56px}
}

/* ============================================================
   真机模式：≤560px 直接铺满视口
   去掉手机外框 / 假状态栏 / 说明卡，交给真实系统绘制
   ============================================================ */
/* 手机竖屏 + 手机横屏：都走全屏模式，不掉回带框演示 */
@media (max-width:560px), (pointer:coarse) and (orientation:landscape){
  body{padding:0;display:block;background:var(--app-bg);background-attachment:fixed}
  .stage{max-width:none;gap:0;width:100%}
  .pagehead,.notes,.homebar{display:none}
  .device{
    width:100%;height:100vh;height:100dvh;padding:0;
    border-radius:0;background:none;box-shadow:none;
    transform:none;margin-bottom:0;
  }
  .app{position:relative;inset:auto;width:100%;height:100%;border-radius:0}
  .statusbar{display:none}
  .appbar{padding-top:var(--safe-t)}
  .navbar{padding:10px 16px 10px}
  .navbar--sub{padding:6px 12px 10px}
  .view{padding-top:12px}
  .toast{bottom:calc(96px + var(--safe-b))}
}

/* 横屏小高度时压缩顶部留白 */
@media (max-width:560px) and (max-height:520px){
  .navbar{padding:6px 16px 6px}
  .view{padding-top:8px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}