/* ============================================================
   public/assets/css/install-free.css · 免费安装页（TrollHelper）专用样式
   iOS 清爽风（App Store 观感）：实心蓝胶囊主按钮 / 「获取」式浅灰
   胶囊副按钮 / 顶部淡蓝氛围渐变 / 毛玻璃遮罩 + 毛玻璃密码弹窗

   · 复用 site.css 的设计变量（--primary / --chip / --radius-pill / --shadow-* 等）
   · 由 head.php 的 $page['styles'] 机制引入，排在 site.css 之后，
     因此本文件内对 body 的规则属于「免费安装页页面级覆盖」；
     site.css 仅按约定删除了旧弹窗段（.overlay/.dialog）并更新了
     一行 z-index 注释，其余一字未改
   · 密码弹窗（.pwd-*）为本页独有组件，整套样式只存在于本文件
   · 响应式：≤575 手机（「安装」通栏置顶、教程/客服并排在下）
     → 576–767 大屏手机/小平板（卡片按钮纵排，site.css 既有逻辑）
     → ≥768 平板/桌面 → ≥1100 由 .container 封顶居中，超大屏自动留白；
     弹窗宽度 min(92vw,400px)，手机到超大屏全程自适应
   ============================================================ */

/* ------------------------------------------------------------
   ① 按钮体系（自实现，替代 Bootstrap 的 .btn / .btn-primary /
      .btn-outline-primary）
   · 取值与付费页 install-paid.css、首页 home.css 完全一致，保证全站
     按钮观感统一（页面级 CSS 只随各自页面加载，所以本页需自带一份）
   · .btn-tint 替代原 Bootstrap 的 .btn-outline-primary：iOS 体系里
     几乎不用描边按钮，App Store 的「获取」按钮就是浅灰胶囊 + 蓝字
   ------------------------------------------------------------ */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;                  /* iOS 推荐最小可点区域 */
    padding:.6rem 1.5rem;
    border:0;
    border-radius:var(--radius-pill); /* 胶囊 */
    font:inherit;
    font-size:1rem;
    font-weight:700;
    line-height:1.2;
    white-space:nowrap;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    user-select:none;
    -webkit-user-select:none;
    -webkit-tap-highlight-color:transparent;
    transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .12s ease;
}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(.97)}     /* iOS 按压回缩 */
.btn:focus-visible{outline:2px solid var(--primary-ink);outline-offset:2px}

/* 主按钮「安装 / 提交」：实心蓝胶囊 + 柔和蓝晕（App Store 蓝色 CTA） */
.btn-primary{
    background:var(--primary);
    color:#fff;
}
.btn-primary:hover{background:var(--primary-ink);color:#fff}

/* 副按钮「教程 / 客服 / 获取密码」：App Store「获取」式浅灰胶囊 + 蓝字 */
.btn-tint{
    background:var(--chip);
    color:var(--primary-ink);
}
.btn-tint:hover{background:var(--chip-hover);color:var(--primary-ink)}

/* ------------------------------------------------------------
   ② 页面顶部氛围：淡蓝 → 页面底色 的纵向渐变
   与首页 Hero、付费页同色系（#eaf1ff），三页一脉相承；
   毛玻璃吸顶导航悬在渐变上滚动，玻璃质感更明显
   覆盖项：body 的 background（site.css 为 var(--bg) 纯色；
   极老的浏览器若不识别渐变会整条失效，自动退回 site.css 的纯色）
   ------------------------------------------------------------ */
body{background:linear-gradient(180deg,#eaf1ff 0%,var(--bg) 420px)}

/* ------------------------------------------------------------
   ③ 排版微调
   · 大标题紧排：App Store 式 -0.02em（新增属性，site.css 未设过）
   · 正文栏宽收窄到 680px，与 .app-card / .install-tip 同宽，
     整页一条视觉轴线（覆盖 site.css 的 .prose 820px）
   ------------------------------------------------------------ */
.install-h1{letter-spacing:-.02em}
.install-page .prose{max-width:680px}

/* ------------------------------------------------------------
   ④ App 卡片与提示条细节
   · 图标 1px 发丝内描边（App Store 图标同款，浅色图标不会和
     白卡片融成一片）；outline 不占布局、跟随圆角
   · 提示条里的「付费通道」链接改为同色系下划线，琥珀色提示条里
     不再突兀地冒出一截蓝字
   · .text-danger：沿用原 Bootstrap 类名、由本文件自行定义
     （Bootstrap 已移除），用于提示条里的红色强调句
   ------------------------------------------------------------ */
.app-icon{outline:1px solid rgba(28,29,31,.08);outline-offset:-1px}
.install-tip a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.install-tip a:hover{opacity:.75}
.text-danger{color:#d70015;font-weight:600}

/* ------------------------------------------------------------
   ⑤ 「关于」区块上间距（自实现，替代 Bootstrap 的 .mt-5，
      与付费页 .install-about 同名同值）
   ------------------------------------------------------------ */
.install-about,
.install-howto,
.install-faq{margin-top:clamp(36px,7vw,60px)}

/* ------------------------------------------------------------
   ⑥ 安装密码弹窗（本页独有组件，全新 .pwd-* 类名，
      与 site.css 已删除的旧 .overlay/.dialog 无任何关联）
   · 遮罩：深色半透明 + 毛玻璃模糊，iOS 弹层质感
   · 弹窗：近白半透明 + 强毛玻璃 + 大圆角 + 大阴影（App Store 卡片）
   · 顺序固定：点我获取密码（主按钮）→ 输入框 → 提交；错误提示纯文字、默认隐藏，
     仅用于网络/接口异常；空密码 / 密码错误改为给「点我获取密码」按钮加吸睛动效；
     JS 只切换 .is-open / .is-show / .is-shake / .is-error / .is-attention
   ------------------------------------------------------------ */
.pwd-overlay{
    display:none;
    position:fixed;
    inset:0;
    z-index:100;                      /* 高于吸顶导航(50) */
    background:rgba(17,24,39,.42);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
}
.pwd-dialog{
    display:none;
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:101;
    width:min(92vw,400px);
    max-height:85vh;                  /* 小屏横屏 / 弹出键盘时兜底可滚动 */
    overflow:auto;
    padding:clamp(22px,5vw,28px);
    background:rgba(255,255,255,.9);
    -webkit-backdrop-filter:saturate(180%) blur(22px);
    backdrop-filter:saturate(180%) blur(22px);
    border-radius:var(--radius);
    box-shadow:var(--shadow-lg);
}
.pwd-overlay.is-open{display:block;animation:pwd-fade .2s ease-out}
.pwd-dialog.is-open{display:block;animation:pwd-pop .22s ease-out}
@keyframes pwd-fade{from{opacity:0}to{opacity:1}}
@keyframes pwd-pop{
    from{opacity:0;transform:translate(-50%,-50%) scale(.94)}
    to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

/* 右上角关闭：App Store 弹层同款灰圆点 ✕ */
.pwd-close{
    position:absolute;
    top:14px;
    right:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    padding:0;
    border:0;
    border-radius:50%;
    background:var(--chip);
    color:var(--ink-soft);
    font-size:15px;
    line-height:1;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:background .18s ease,color .18s ease,transform .12s ease;
}
.pwd-close:hover{background:var(--chip-hover);color:var(--ink)}
.pwd-close:active{transform:scale(.92)}
.pwd-close:focus-visible{outline:2px solid var(--primary-ink);outline-offset:2px}

/* 改后 */
/* 弹窗内两枚按钮（点我获取密码 / 提交）通栏，主次靠颜色区分 */
.pwd-dialog .btn{width:100%}

/* 版本提示条：弹窗第一个元素 —— 浅灰信息条，与下方蓝色按钮区分开；
   上边距用来避开右上角 ✕（这份职责原先在 .pwd-get 上，现移到这里） */
.pwd-support{
    margin:1.6rem 0 0;
    padding:.6rem .85rem;
    border-radius:var(--radius-sm);
    background:var(--surface-2);
    color:var(--ink-soft);
    font-size:.88rem;
    line-height:1.55;
}
.pwd-support b{color:var(--ink);font-weight:700}                 /* 版本号略加重 */
.pwd-support a{color:var(--primary-ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.pwd-support a:hover{opacity:.75}

.pwd-get{
    margin:.9rem 0 0;
    min-height:48px;
    font-size:1.05rem;
    box-shadow:0 8px 22px rgba(47,107,255,.35);
}
.pwd-get:hover{box-shadow:0 10px 26px rgba(47,107,255,.45)}

/* 空密码 / 密码错误时：JS 改写本按钮文字为「xxxx，点我获取密码！」并加 .is-shake，
   复用下方 .pwd-error 的 pwd-shake 关键帧播一次左右抖动（iOS 锁屏输错密码同款），把视线引到获取密码上。
   只动 transform、不碰 box-shadow，抖动时按钮的蓝色光晕照常在；动画不带 fill，播完回常态。
   JS 用「摘类 → 强制回流 → 加类」实现可重复触发。 */
.pwd-get.is-shake{animation:pwd-shake .5s cubic-bezier(.36,.07,.19,.97) both}

/* 密码输入框 */
.pwd-input{
    width:100%;
    min-height:46px;
    margin:.8rem 0 0;
    padding:.65rem .95rem;
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    background:var(--surface);
    color:var(--ink);
    font:inherit;
    font-size:16px;                   /* ≥16px，iOS 聚焦不会自动放大页面 */
    outline:none;
    transition:border-color .18s ease,box-shadow .18s ease;
}
.pwd-input::placeholder{color:var(--ink-faint)}
.pwd-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(47,107,255,.18)}
.pwd-input.is-error{border-color:#d70015}
.pwd-input.is-error:focus{border-color:#d70015;box-shadow:0 0 0 3px rgba(215,0,21,.12)}

/* 错误提示：默认隐藏，JS 加 .is-show 显示；显示同时加 .is-shake 触发
   横向抖动（iOS 锁屏输错密码同款），把用户视线拉到提示上 */
.pwd-error{display:none;margin:.55rem 0 0;font-size:.88rem;line-height:1.5;color:#d70015}
.pwd-error.is-show{display:block}
.pwd-error.is-shake{animation:pwd-shake .5s cubic-bezier(.36,.07,.19,.97) both}
@keyframes pwd-shake{
    10%,90%{transform:translateX(-1px)}
    20%,80%{transform:translateX(2px)}
    30%,50%,70%{transform:translateX(-4px)}
    40%,60%{transform:translateX(4px)}
}

/* 「提交」：iOS 三档按钮的中间档「着色按钮」（tinted）——
   主色 12% 浅蓝底 + 蓝字，比灰胶囊显眼一档，
   又不与「点我获取密码」的实心蓝 + 光晕撞款；
   颜色直接写在 .pwd-submit 上（弹窗专属皮肤，HTML 不再挂 btn-tint） */
.pwd-submit{
    margin-top:.9rem;
    background:rgba(47,107,255,.12);
    color:var(--primary-ink);
}
.pwd-submit:hover{background:rgba(47,107,255,.2)}
.pwd-submit[disabled]{opacity:.6;cursor:default;pointer-events:none}

/* 弹窗打开时锁定背景滚动（JS 给 html / body 加 .pwd-lock） */
.pwd-lock{overflow:hidden}

/* ------------------------------------------------------------
   ⑦ 响应式微调（站点级断点 site.css 已处理，这里只补页面细节）
   ≤575：site.css 已把 .app-actions 改为横排自适应；本页再让
   主按钮「安装」独占一整行——大按钮在上、教程/客服并排在下，
   手机上的主次关系更接近 App Store 详情页
   ------------------------------------------------------------ */
@media (max-width:575px){
    .app-actions .btn-primary{flex-basis:100%}
}

/* ------------------------------------------------------------
   ⑧ 降级与无障碍偏好
   · 不支持 backdrop-filter 的老浏览器：吸顶导航退回近实色；
     遮罩加深、弹窗退回纯白，保证遮挡力与可读性
   · 用户系统开启「减弱动态效果」时关闭弹窗动画
   ------------------------------------------------------------ */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
    .site-header{background:rgba(255,255,255,.96)}
    .pwd-overlay{background:rgba(17,24,39,.55)}
    .pwd-dialog{background:var(--surface)}
}
@media (prefers-reduced-motion:reduce){
    .pwd-overlay.is-open,
    .pwd-dialog.is-open{animation:none}
    .pwd-error.is-shake{animation:none}
    .pwd-get.is-shake{animation:none}
}