/* 三根手指頭 — App 安裝引導層樣式
   載入順序放最後；整檔移除即可回滾，不影響既有版面。 */

.tf-install{position:fixed;inset:0;z-index:80;display:grid;align-items:end;justify-items:center;
  opacity:0;transition:opacity .3s var(--ease,cubic-bezier(.22,1,.36,1));pointer-events:none}
.tf-install.is-on{opacity:1;pointer-events:auto}
.tf-i-backdrop{position:absolute;inset:0;background:rgba(15,32,28,.52);backdrop-filter:blur(3px)}

/* 引導開啟時，收起底部固定 CTA，避免蓋住卡片按鈕 */
html.tf-sheet-open .mcta{display:none}

.tf-i-card{position:relative;width:min(430px,calc(100% - 22px));margin:0 0 16px;padding:24px 22px 18px;
  max-height:86vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--surf,#fffefb);border-radius:26px;box-shadow:0 24px 60px rgba(15,32,28,.28);
  transform:translateY(22px) scale(.98);transition:transform .34s var(--ease,cubic-bezier(.22,1,.36,1))}
.tf-install.is-on .tf-i-card{transform:none}
@media (min-width:720px){.tf-install{align-items:center}.tf-i-card{margin:0}}

.tf-i-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(20,40,35,.06);color:var(--mut,#5d6b66);font-size:20px;line-height:1;cursor:pointer}
.tf-i-x:hover{background:rgba(20,40,35,.12)}

.tf-i-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.tf-i-logo{width:60px;height:60px;border-radius:15px;border:1px solid var(--line,#e6e2d9);
  box-shadow:0 6px 16px rgba(20,40,35,.12);flex:none}
.tf-i-head b{display:block;font-family:var(--font-display,inherit);font-size:19px;line-height:1.3;color:var(--ink,#17231f)}
.tf-i-head span{display:block;margin-top:3px;font-size:13px;color:var(--mut,#5d6b66)}

.tf-i-perks{list-style:none;margin:6px 0 18px;padding:0;display:grid;gap:9px}
.tf-i-perks li{position:relative;padding-left:26px;font-size:14.5px;color:var(--ink,#17231f)}
.tf-i-perks li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;
  background:var(--teal-100,#e3efec)}
.tf-i-perks li::after{content:"";position:absolute;left:5.5px;top:9.5px;width:5px;height:9px;
  border:solid var(--teal,#1f6f62);border-width:0 2px 2px 0;transform:rotate(45deg)}

.tf-i-steps{margin:4px 0 14px;padding:0 0 0 4px;list-style:none;display:grid;gap:11px}
.tf-i-steps li{position:relative;padding-left:34px;font-size:14.5px;line-height:1.6;color:var(--ink,#17231f)}
.tf-i-steps.tf-i-ios li{padding-left:38px}
.tf-i-num{position:absolute;left:0;top:1px;width:23px;height:23px;border-radius:50%;
  background:var(--teal,#1f6f62);color:#fff;font-size:12.5px;font-weight:800;display:grid;place-items:center}
.tf-i-steps li:not(.tf-i-ios li)::before{}
.tf-i-steps:not(.tf-i-ios) li{counter-increment:s}
.tf-i-steps:not(.tf-i-ios) li::before{content:counter(s);position:absolute;left:0;top:1px;width:23px;height:23px;
  border-radius:50%;background:var(--teal,#1f6f62);color:#fff;font-size:12.5px;font-weight:800;
  display:grid;place-items:center}
.tf-i-steps b{color:var(--teal,#1f6f62)}

/* iOS 分享圖示（方框＋上箭頭） */
.tf-i-share{display:inline-block;width:15px;height:19px;vertical-align:-4px;margin:0 2px;
  border:2px solid var(--teal,#1f6f62);border-top:0;border-radius:0 0 4px 4px;position:relative}
.tf-i-share::before{content:"";position:absolute;left:50%;top:-11px;width:2px;height:12px;
  background:var(--teal,#1f6f62);transform:translateX(-50%)}
.tf-i-share::after{content:"";position:absolute;left:50%;top:-11px;width:7px;height:7px;
  border:solid var(--teal,#1f6f62);border-width:2px 0 0 2px;transform:translateX(-50%) rotate(45deg)}

.tf-i-note{margin:2px 0 12px;font-size:13.5px;line-height:1.7;color:var(--mut,#5d6b66)}
.tf-i-warn{margin:0 0 12px;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.6;
  background:var(--amber-100,#fdf1e4);color:var(--amber-d,#b45f24)}

.tf-i-btn{width:100%;padding:15px 20px;border:0;border-radius:999px;font:inherit;font-weight:800;font-size:16px;
  background:var(--teal,#1f6f62);color:#fff;cursor:pointer;box-shadow:0 10px 24px rgba(31,111,98,.28);
  transition:transform .3s var(--ease,cubic-bezier(.22,1,.36,1)),background .3s}
.tf-i-btn:hover{transform:translateY(-2px)}
.tf-i-btn:active{transform:scale(.985)}
.tf-i-copy{background:var(--amber,#c97639);box-shadow:0 10px 24px rgba(201,118,57,.28)}
.tf-i-later{display:block;width:100%;margin-top:8px;padding:11px;border:0;background:none;cursor:pointer;
  font:inherit;font-size:14px;color:var(--mut,#5d6b66)}
.tf-i-later:hover{color:var(--ink,#17231f)}

/* 頁尾／選單的常駐入口 */
.tf-app-cta{display:flex;align-items:center;gap:13px;width:100%;margin:6px 0 2px;padding:13px 16px;
  border:1px solid rgba(255,255,255,.22);border-radius:18px;background:rgba(255,255,255,.06);
  color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .3s,transform .3s}
.tf-app-cta:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.tf-app-cta img{width:38px;height:38px;border-radius:10px;flex:none}
.tf-app-cta b{display:block;font-size:14.5px;font-weight:800}
.tf-app-cta span{display:block;font-size:12px;opacity:.78;margin-top:1px}

/* 已安裝成 App 時：隱藏瀏覽器才需要的元素 */
html.is-app .tf-app-cta{display:none}

@media (prefers-reduced-motion:reduce){
  .tf-install,.tf-i-card,.tf-i-btn,.tf-app-cta{transition:none}
}