/* 心锚 XINAN · 安装引导样式
   与 app.css 同一套设计变量，保证「安装条」看起来是应用本身的一部分，
   而不是浏览器弹出来的广告。 */

.xn-install{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(140%);
  z-index:9000; width:calc(100% - 28px); max-width:430px;
  display:flex; align-items:center; gap:12px;
  padding:11px 12px 11px 14px; border-radius:16px;
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--sh-3);
  transition:transform .32s cubic-bezier(.22,.8,.28,1), opacity .28s ease;
  opacity:0;
}
.xn-install.is-on{ transform:translateX(-50%) translateY(0); opacity:1 }
.xn-install-mark{
  flex:0 0 auto; width:38px; height:38px; border-radius:11px;
  background:linear-gradient(150deg,#4E8C82,#2A5850); color:#F4F1EA;
  display:grid; place-items:center; font-family:var(--serif); font-size:19px; font-weight:600;
  box-shadow:0 2px 10px rgba(63,123,114,.28);
}
.xn-install-text{ flex:1 1 auto; min-width:0 }
.xn-install-text b{ display:block; font-size:13.5px; letter-spacing:.02em; color:var(--ink) }
.xn-install-text span{ display:block; font-size:12px; color:var(--ink-3); line-height:1.5 }
.xn-install-btn{
  flex:0 0 auto; padding:8px 15px; border-radius:9px; font-size:13px; font-weight:600;
  background:var(--primary); color:#fff; white-space:nowrap;
}
.xn-install-btn:hover{ background:var(--primary-deep) }
.xn-install-x{
  flex:0 0 auto; width:26px; height:26px; border-radius:8px; color:var(--ink-4);
  font-size:15px; line-height:1; display:grid; place-items:center;
}
.xn-install-x:hover{ background:var(--surface-3); color:var(--ink-2) }

@media (max-width:560px){
  .xn-install{ bottom:12px }
}

/* 手机上导航固定在底部，安装引导条要让开它，否则两条会叠在一起 */
@media (max-width:1080px){
  .xn-install{ bottom:calc(74px + env(safe-area-inset-bottom,0px)) }
}

/* ── 登录页里的安装入口 ──
   左侧品牌区（深色）在手机上会被隐藏，所以另做一份放在登录面板里的浅色版本，
   保证任何尺寸下都找得到「怎么装到手机上」。 */

.auth-install{
  margin-top:20px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  font-size:12.5px;
}
.auth-install a{
  color:#F4F1EA; font-weight:700; text-decoration:none;
  border-bottom:1px solid rgba(244,241,234,.42); padding-bottom:1px;
}
.auth-install a:hover{ border-bottom-color:#F4F1EA }
.auth-install span{ color:#7CA9A2; font-size:12px; letter-spacing:.02em }

.auth-install-m{ margin-top:22px; text-align:center; display:none }
.auth-install-m a{
  font-size:13px; font-weight:600; color:var(--primary); text-decoration:none;
}
.auth-install-m a:hover{ text-decoration:underline }

@media (max-width:860px){
  .auth-install-m{ display:block }
}