:root {
  --line-green: #06C755;
  --bubble-me: #A4E37B;
  --chat-bg: #8FA7CF;
  --ios-blue: #0A84FF;
  --ink: #1c1c1e;
  --sub: #8e8e93;
  --sep: #e5e5ea;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #111; overflow: hidden; }
body { font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Helvetica Neue", sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; }

#phone { position: relative; width: 100%; max-width: 430px; height: 100dvh; margin: 0 auto; overflow: hidden; background: #000; }
@media (min-width: 600px) { #phone { height: min(100dvh, 932px); top: 50%; transform: translateY(-50%); border-radius: 28px; box-shadow: 0 30px 80px rgba(0,0,0,.6); } }
#screen { position: absolute; inset: 0; }

.scr { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: #fff; }
.scr.enter { animation: scrIn .28s ease-out; }
@keyframes scrIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* 狀態列 */
.sb { flex: none; align-self: stretch; height: calc(44px + var(--safe-t)); padding: calc(10px + var(--safe-t)) 26px 0 34px; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 16px; color: #000; }
.sb.light { color: #fff; }
.sb-r { display: flex; gap: 6px; align-items: center; }
.sb-r svg { fill: currentColor; }
.sb-bat { width: 25px; height: 12px; border: 1.5px solid currentColor; border-radius: 4px; padding: 1.5px; opacity: .9; position: relative; }
.sb-bat i { display: block; width: 70%; height: 100%; background: currentColor; border-radius: 1.5px; }
.home-ind { position: absolute; left: 50%; bottom: calc(6px + var(--safe-b)); transform: translateX(-50%); width: 134px; height: 18px; z-index: 5; }
.home-ind::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 5px; border-radius: 3px; background: #000; opacity: .85; }
.home-ind.light::after { background: #fff; }

/* 開始 */
.start { background: radial-gradient(120% 80% at 50% 0%, #3a2f2a 0%, #14100e 60%); color: #f4ece4; justify-content: center; }
.start-in { padding: 0 32px; text-align: center; }
.start-kicker { letter-spacing: .28em; font-size: 12px; opacity: .6; margin-bottom: 22px; }
.start-title { font-size: 30px; line-height: 1.45; font-weight: 700; margin-bottom: 28px; }
.start-tips { font-size: 14px; opacity: .65; line-height: 1.8; margin-bottom: 42px; }
.btn-start { background: #f4ece4; color: #1a1411; font-weight: 700; padding: 14px 54px; border-radius: 999px; font-size: 17px; }

/* 鎖定畫面 */
.lock { background: linear-gradient(180deg, #6b5a52 0%, #3d3431 55%, #1f1a19 100%); color: #fff; align-items: center; }
.ls-lock { margin-top: 6px; font-size: 18px; opacity: .9; }
.ls-date { margin-top: 10px; font-size: 21px; font-weight: 600; }
.ls-time { font-size: 92px; font-weight: 600; line-height: 1; letter-spacing: -2px; margin: 6px 0 26px; }
.ls-notes { width: 100%; padding: 0 12px; display: flex; flex-direction: column; gap: 10px; }
.ls-note { text-align: left; background: rgba(255,255,255,.22); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 20px; padding: 12px 14px; color: #fff; animation: popIn .4s ease-out; }
.ls-note-h { display: flex; align-items: center; gap: 8px; font-size: 13px; opacity: .85; margin-bottom: 4px; }
.ls-note-h em { margin-left: auto; font-style: normal; }
.ls-note b { display: block; font-size: 15px; }
.ls-note p { margin: 2px 0 0; font-size: 14px; opacity: .9; }
.mini { width: 20px; height: 20px; display: inline-block; }
.mini .ic { width: 20px; height: 20px; border-radius: 5px; }
.ls-unlock { margin-top: auto; margin-bottom: calc(40px + var(--safe-b)); color: #fff; opacity: .8; font-size: 15px; }
@keyframes popIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }

/* 主畫面 */
.home { background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.08) 35%, rgba(0,0,0,.10) 70%, rgba(0,0,0,.40) 100%), url(../assets/wallpaper-home.webp) center / cover, #5d4f4a; color: #fff; }
.hm-widget { margin: 14px 22px 18px; background: rgba(255,255,255,.2); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 22px; padding: 16px 18px; }
.hm-w-date { font-size: 24px; font-weight: 700; }
.hm-w-sub { font-size: 13px; opacity: .75; margin-top: 2px; min-height: 16px; }
.hm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 0; padding: 0 14px; }
.app { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.app-name { font-size: 12px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.app.is-new .ic { animation: newApp 1.6s ease-in-out infinite; }
.app.is-new::before { content: "新"; position: absolute; top: -6px; left: 6px; background: #ff9f0a; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 8px; z-index: 2; }
@keyframes newApp { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.badge { position: absolute; top: -6px; right: 8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #ff3b30; color: #fff; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.hm-dots { margin-top: auto; display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; }
.hm-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.4); }
.hm-dots i.on { background: #fff; }
.hm-dock { margin: 0 12px calc(28px + var(--safe-b)); padding: 14px 6px; display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(255,255,255,.2); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 30px; }
.hm-dock .app-name { display: none; }

/* 圖示 */
.ic { width: 60px; height: 60px; border-radius: 14px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.ic svg { width: 100%; height: 100%; }
.ic-photos { background: #fff; }
.ic-photos i { position: absolute; width: 14px; height: 24px; border-radius: 8px; top: 8px; left: 23px; transform-origin: 7px 22px; opacity: .85; }
.ic-photos i:nth-child(1) { background: #ff9f0a; transform: rotate(0deg); }
.ic-photos i:nth-child(2) { background: #ffd60a; transform: rotate(45deg); }
.ic-photos i:nth-child(3) { background: #30d158; transform: rotate(90deg); }
.ic-photos i:nth-child(4) { background: #64d2ff; transform: rotate(135deg); }
.ic-photos i:nth-child(5) { background: #0a84ff; transform: rotate(180deg); }
.ic-photos i:nth-child(6) { background: #bf5af2; transform: rotate(225deg); }
.ic-photos i:nth-child(7) { background: #ff375f; transform: rotate(270deg); }
.ic-photos i:nth-child(8) { background: #ff453a; transform: rotate(315deg); }
.ic-line { background: var(--line-green); }
.ic-uber { background: #000; color: #fff; font-weight: 700; font-size: 17px; letter-spacing: -.3px; }
.ic-notes { background: #fff; flex-direction: column; justify-content: flex-start; align-items: stretch; }
.ic-notes b { height: 17px; background: #ffd23f; }
.ic-notes s { height: 1px; background: #d1d1d6; margin: 7px 8px 0; }
.ic-safari { background: #fff; }
.ic-weather { background: linear-gradient(180deg, #4aa3f0, #1f6fd1); color: #ffd60a; font-size: 30px; }
.ic-cal { background: #fff; flex-direction: column; color: #000; }
.ic-cal em { font-style: normal; color: #ff3b30; font-size: 10px; font-weight: 600; margin-top: 2px; }
.ic-cal strong { font-size: 28px; font-weight: 400; line-height: 1; }
.ic-camera { background: linear-gradient(180deg, #e5e5ea, #aeaeb2); }
.ic-clock { background: #000; }
.ic-settings { background: linear-gradient(180deg, #e5e5ea, #aeaeb2); }
.ic-phone { background: linear-gradient(180deg, #5ef27a, #2ac94d); }
.ic-msg { background: linear-gradient(180deg, #5ef27a, #2ac94d); }
.ic-music { background: linear-gradient(180deg, #ff5f7a, #fa2d48); }
.ic-mail { background: linear-gradient(180deg, #4fb2ff, #1a7cf5); }

/* 通知橫幅 */
#banner { position: absolute; left: 8px; right: 8px; top: calc(8px + var(--safe-t)); z-index: 40; transform: translateY(-140%); transition: transform .38s cubic-bezier(.2,.9,.3,1.2); }
#banner.show { transform: none; }
.bn-card { display: flex; gap: 10px; align-items: center; background: rgba(245,245,245,.92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: 22px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); cursor: pointer; }
.bn-icon .ic { width: 38px; height: 38px; border-radius: 9px; }
.bn-main { flex: 1; min-width: 0; }
.bn-top { display: flex; justify-content: space-between; font-size: 12px; color: #6e6e73; }
.bn-title { font-weight: 600; font-size: 15px; }
.bn-body { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 內心話（RPG 對話框） */
#os { position: absolute; inset: 0; z-index: 60; display: none; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.35)); }
#os.show { display: block; }
.os-box { position: absolute; left: 12px; right: 12px; bottom: calc(26px + var(--safe-b)); background: rgba(22,18,16,.92); color: #fff; border-radius: 14px; padding: 26px 18px 18px; min-height: 104px; border: 1.5px solid rgba(255,236,210,.35); box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: osIn .25s ease-out; }
@keyframes osIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.os-name { position: absolute; top: -13px; left: 14px; background: #f2d9b8; color: #2a1f17; font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 8px; }
.os-text { font-size: 17px; line-height: 1.6; letter-spacing: .02em; min-height: 27px; }
.os-next { position: absolute; right: 16px; bottom: 10px; font-size: 12px; opacity: 0; color: #f2d9b8; }
#os.done .os-next, .os-box:has(~ *) .os-next { opacity: 1; }
#os.done .os-next { animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }

/* 系統引導 */
#guide { position: absolute; inset: 0; z-index: 70; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.45); padding: 0 28px; }
#guide.show { display: flex; }
.guide-card { width: 100%; background: #fffaf3; border-radius: 20px; padding: 24px 22px 18px; text-align: center; animation: popIn .3s ease-out; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.guide-tag { display: inline-block; font-size: 12px; font-weight: 700; color: #b5651d; background: #fde8cf; padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; letter-spacing: .1em; }
.guide-text { font-size: 17px; line-height: 1.7; color: #2a2420; margin-bottom: 18px; }
.guide-ok { width: 100%; padding: 12px; border-radius: 12px; background: #2a2420; color: #fff; font-weight: 600; }

/* 提示 */
#toast { position: absolute; left: 50%; bottom: calc(90px + var(--safe-b)); transform: translate(-50%, 20px); z-index: 80; background: rgba(30,30,30,.92); color: #fff; padding: 11px 16px; border-radius: 14px; font-size: 14px; display: flex; gap: 8px; align-items: center; opacity: 0; pointer-events: none; transition: all .25s; width: max-content; max-width: calc(100% - 40px); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 底部問答 */
#sheet { position: absolute; inset: 0; z-index: 50; display: none; }
#sheet.show { display: block; }
.sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.sheet-card { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 22px 22px 0 0; padding: 10px 20px calc(24px + var(--safe-b)); animation: sheetUp .3s ease-out; }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.sheet-card.shake { animation: shake .4s; }
@keyframes shake { 20%,60% { transform: translateX(-8px); } 40%,80% { transform: translateX(8px); } }
.sheet-grab { width: 38px; height: 5px; background: #d1d1d6; border-radius: 3px; margin: 0 auto 16px; }
.q-lock { font-size: 13px; color: var(--sub); margin-bottom: 6px; }
.q-text { font-size: 20px; font-weight: 700; line-height: 1.5; margin-bottom: 16px; }
.q-form { display: flex; gap: 8px; }
.q-input { flex: 1; min-width: 0; border: 1.5px solid #d1d1d6; border-radius: 12px; padding: 12px 14px; font-size: 17px; outline: none; }
.q-input:focus { border-color: var(--ios-blue); }
.q-submit { background: var(--ios-blue); color: #fff; font-weight: 600; border-radius: 12px; padding: 0 20px; }
.q-msg { min-height: 22px; margin-top: 10px; color: #ff3b30; font-size: 14px; }
.q-msg b { color: #000; }
.q-hint { background: #fff7e6; color: #8a5a00; border-radius: 10px; padding: 10px 12px; font-size: 14px; line-height: 1.6; margin-top: 8px; }
.q-reveal { margin-top: 10px; color: var(--ios-blue); font-size: 14px; }

/* 彈窗 */
#modal { position: absolute; inset: 0; z-index: 55; display: none; align-items: center; justify-content: center; padding: 0 16px; }
#modal.show { display: flex; }
.modal-bg { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.modal-card { position: relative; width: 100%; max-height: 88%; overflow-y: auto; background: #fff; border-radius: 22px; padding: 22px 18px 18px; animation: popIn .25s ease-out; }
.modal-x { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: #f2f2f7; color: #636366; font-size: 14px; }
.demo-tag { font-size: 12px; color: var(--sub); }
.demo h3 { margin: 4px 0 12px; font-size: 20px; }
.demo-media { border-radius: 14px; overflow: hidden; background: #f2f2f7; }
.demo-media img, .demo-media video { display: block; width: 100%; max-height: 52vh; object-fit: contain; background: #000; }
.demo-miss { display: none; }
.demo-media.miss img, .demo-media.miss video { display: none; }
.demo-media.miss .demo-miss { display: block; padding: 50px 12px; text-align: center; color: var(--sub); font-size: 15px; line-height: 1.6; }
.demo-task { font-size: 15px; line-height: 1.7; margin: 14px 0 4px; }
.demo-sub { font-size: 13px; color: var(--sub); line-height: 1.6; margin: 0 0 14px; }
.btn-primary { width: 100%; padding: 13px; border-radius: 12px; background: var(--ios-blue); color: #fff; font-weight: 600; font-size: 16px; }

/* 導覽列 */
.nav-row { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 4px 16px 6px; }
.nav-back { color: var(--ios-blue); font-size: 17px; }
.nav-act { color: var(--ios-blue); font-size: 16px; background: #f2f2f7; padding: 5px 14px; border-radius: 999px; }
.nav-back.nt, .nav-act.nt { color: #d8a200; background: none; }
.nav-row.dark { color: #fff; }
.nav-row.dark .nav-back { color: #fff; font-size: 20px; }
.nav-title { font-weight: 600; }

/* 相簿 */
.ph-head { padding: 0 16px 6px; }
.ph-head h1 { margin: 0; font-size: 32px; }
.ph-count { color: var(--sub); font-size: 14px; }
.ph-sec { padding: 14px 0 4px; }
.ph-sec h3 { margin: 0 16px; font-size: 19px; }
.ph-sub { margin: 2px 16px 10px; color: var(--sub); font-size: 13px; }
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.tile { position: relative; aspect-ratio: 1; background: #e9e9ee; overflow: hidden; }
.tile-broken { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #aeaeb2; background: repeating-linear-gradient(45deg, #ececf0 0 10px, #e4e4ea 10px 20px); }
.tile.is-ask .tile-broken { color: #ff9f0a; box-shadow: inset 0 0 0 2px #ffcf85; }
.tile-cam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; background: #fdf3e4; }
.tile-thumb { position: absolute; inset: 0; }
.tile-thumb img, .tile-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-time { position: absolute; left: 6px; bottom: 5px; font-size: 12px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.ph-foot { text-align: center; color: var(--sub); font-size: 13px; padding: 18px 0 60px; }

/* 照片檢視 */
.pv { background: #000; color: #fff; }
.pv-top { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 4px 14px 8px; }
.pv-back, .pv-more { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.14); font-size: 22px; }
.pv-title { text-align: center; background: rgba(255,255,255,.14); border-radius: 999px; padding: 6px 18px; max-width: 64%; }
.pv-title b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-title span { font-size: 12px; opacity: .75; }
.pv-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; transition: flex .3s; min-height: 160px; }
.pv-stage.up { flex: 0 0 34%; }
.pv-broken, .pv-cam { text-align: center; color: #8e8e93; }
.pv-broken p, .pv-cam p { margin: 12px 0 0; font-size: 15px; line-height: 1.6; }
.pv-cam { color: #f2d9b8; }
.pv-up { display: block; margin: 14px auto 0; background: #f2d9b8; color: #2a1f17; font-weight: 700; padding: 10px 22px; border-radius: 999px; }
.pv-stage.up .pv-cam svg, .pv-stage.up .pv-broken svg { width: 48px; height: 48px; }
.pv-stage.up .pv-cam p, .pv-stage.up .pv-broken p { display: none; }
.pv-media { position: absolute; top: 0; left: 0; right: 0; bottom: 64px; display: flex; align-items: center; justify-content: center; }
.pv-media img, .pv-media video { max-width: 100%; max-height: 100%; object-fit: contain; }
.pv-q { position: absolute; left: 16px; bottom: 14px; width: 38px; height: 38px; border-radius: 50%; background: #f2d9b8; color: #2a1f17; font-weight: 800; font-size: 19px; box-shadow: 0 0 0 0 rgba(242,217,184,.7); animation: ring 2s infinite; z-index: 2; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(242,217,184,.7); } 70% { box-shadow: 0 0 0 14px rgba(242,217,184,0); } 100% { box-shadow: 0 0 0 0 rgba(242,217,184,0); } }
.pv-info { display: none; flex: 1; overflow-y: auto; background: #1c1c1e; padding: 14px 16px 10px; }
.pv-info.show { display: block; animation: sheetUp .3s ease-out; }
.pi-date { font-size: 17px; font-weight: 600; }
.pi-file { color: #8e8e93; font-size: 14px; margin: 2px 0 12px; }
.pi-dev { background: #2c2c2e; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; margin-bottom: 12px; }
.pi-dev span { color: #aeaeb2; font-size: 13px; }
.pi-map { display: block; width: 100%; text-align: left; border-radius: 12px; overflow: hidden; background: #2c2c2e; position: relative; }
.pi-map-bg { position: relative; height: 130px; }
.pi-map-bg svg { width: 100%; height: 100%; display: block; }
.pi-map.locked .pi-map-bg { filter: blur(3px) grayscale(.6) brightness(.6); }
.pi-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #fff; }
.pi-lock span { font-size: 26px; }
.pi-lock b { font-size: 16px; }
.pi-lock small { font-size: 13px; opacity: .8; }
.pi-map.can .pi-lock small { color: #f2d9b8; opacity: 1; }
.pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -80%); font-size: 30px; }
.pi-place { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; }
.pi-place b { display: block; color: var(--ios-blue); }
.pi-place small { color: #aeaeb2; }
.pi-nav { background: var(--ios-blue); color: #fff; text-decoration: none; padding: 7px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; flex: none; }
.pv-bar { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 10px 16px calc(30px + var(--safe-b)); }
.pv-bar > button { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; }
.pv-bar-mid { display: flex; gap: 6px; background: rgba(255,255,255,.14); border-radius: 999px; padding: 4px 10px; }
.pv-bar-mid button { width: 42px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.pv-i.on { color: #f2d9b8; }
.pv-i.pulse { color: #ffcf85; animation: ring 1.6s infinite; }

/* LINE 列表 */
.line { background: #fff; }
.ln-top { flex: none; display: flex; align-items: center; gap: 16px; padding: 6px 16px; }
.ln-tab { font-size: 19px; }
.ln-tab2 { color: var(--sub); font-size: 17px; }
.ln-icons { margin-left: auto; font-size: 20px; color: #333; }
.ln-search { margin: 6px 16px 8px; background: #f2f2f2; border-radius: 10px; padding: 8px 12px; color: var(--sub); font-size: 15px; }
.ln-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 16px; text-align: left; }
.ln-mid { flex: 1; min-width: 0; }
.ln-mid b { font-size: 16px; font-weight: 600; }
.ln-mid p { margin: 3px 0 0; color: var(--sub); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln-end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 12px; color: var(--sub); }
.ln-end em { font-style: normal; background: var(--line-green); color: #fff; min-width: 20px; height: 20px; border-radius: 10px; font-size: 12px; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.av { position: relative; flex: none; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; background: #dfe7f5; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.av-plain { background: #c7c7cc; color: #fff; font-size: 18px; font-weight: 600; }

/* LINE 聊天 */
.chat { background: var(--chat-bg); }
.ct-top { flex: none; display: flex; align-items: center; gap: 10px; padding: 4px 12px 8px; background: var(--chat-bg); color: #1b2333; }
.ct-top .nav-back { color: #1b2333; font-size: 24px; width: 28px; }
.ct-top b { font-size: 17px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-icons { display: flex; gap: 14px; align-items: center; font-size: 19px; }
.ct-body { padding: 6px 10px 14px; }
.day-pill { width: max-content; margin: 6px auto 12px; background: rgba(40,55,85,.35); color: #fff; font-size: 12px; padding: 4px 12px; border-radius: 999px; }
.msg { display: flex; align-items: flex-end; margin-bottom: 6px; }
.msg.new { animation: msgIn .25s ease-out; }
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msg.her { align-items: flex-start; }
.msg.her.first { margin-top: 10px; }
.msg .av { width: 36px; height: 36px; font-size: 17px; margin-right: 8px; }
.av-sp { width: 44px; flex: none; }
.her-col { min-width: 0; max-width: 74%; }
.her-name { font-size: 12px; color: #26324a; margin: 0 0 3px 2px; }
.her-row { display: flex; align-items: flex-end; gap: 5px; }
.bub { background: #fff; border-radius: 18px; padding: 9px 13px; font-size: 16px; line-height: 1.45; word-break: break-word; max-width: 100%; }
.msg.me { justify-content: flex-end; }
.msg.me .bub { background: var(--bubble-me); max-width: 72%; }
.meta { display: flex; flex-direction: column; font-size: 10.5px; color: #26324a; line-height: 1.3; flex: none; }
.msg.me .meta { align-items: flex-end; margin-right: 5px; }
.bub.typing { display: flex; gap: 4px; padding: 13px 14px; }
.bub.typing i { width: 7px; height: 7px; border-radius: 50%; background: #b0b6c3; animation: dot 1.2s infinite; }
.bub.typing i:nth-child(2) { animation-delay: .15s; }
.bub.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%,60%,100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.bub.call { background: #fff; }
.stk { width: 130px; height: 100px; position: relative; display: flex; align-items: center; justify-content: center; }
.stk img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; }
.stk-ph { font-size: 60px; }
.stk.miss .stk-ph { display: block; }
.vid { width: 170px; height: 110px; border-radius: 16px; background: linear-gradient(135deg, #3c4658, #1d2330); color: #fff; position: relative; display: flex; align-items: center; justify-content: center; }
.vid-play { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.85); color: #1d2330; display: flex; align-items: center; justify-content: center; font-size: 16px; padding-left: 3px; }
.vid-cap { position: absolute; left: 10px; bottom: 7px; font-size: 11px; opacity: .8; }
.chips { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 8px; background: #f7f7f8; border-top: 1px solid #e9e9ec; animation: chipsUp .3s ease-out; }
@keyframes chipsUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.chips-label { font-size: 12px; color: #8e8e93; padding: 0 4px 2px; }
.chip { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border-radius: 12px; padding: 12px 14px; font-size: 15px; color: #1c1c1e; text-align: left; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.chip i { font-style: normal; font-size: 13px; font-weight: 600; color: var(--line-green); flex: none; }
.chip:active:not(:disabled) { background: #eefaf2; }
.chip:disabled { opacity: .55; }
.chip.used { background: transparent; box-shadow: none; color: #aeaeb2; text-decoration: line-through; }
.ct-input { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px calc(30px + var(--safe-b)); background: #fff; }
.ct-plus { font-size: 22px; color: #555; width: 26px; text-align: center; }
.ct-input input { flex: 1; min-width: 0; background: #f2f2f2; border: 0; border-radius: 18px; padding: 9px 14px; font-size: 16px; outline: none; }
.ct-input input:disabled { color: #aaa; }
.ct-send { color: var(--line-green); font-weight: 700; font-size: 15px; padding: 0 4px; }
.ct-send:disabled { color: #c7c7cc; }
.chat .home-ind { display: none; }

/* 搜尋 */
.sr-panel { position: absolute; inset: 0; z-index: 10; background: #fff; display: flex; flex-direction: column; padding-top: calc(44px + var(--safe-t)); }
.sr-top { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px; }
.sr-top span { color: var(--sub); }
.sr-top input { flex: 1; min-width: 0; background: #f2f2f2; border: 0; border-radius: 10px; padding: 9px 12px; font-size: 16px; outline: none; }
.sr-top button { color: var(--line-green); font-weight: 600; }
.sr-h { padding: 8px 16px; font-size: 13px; color: var(--sub); }
.sr-row { width: 100%; display: flex; justify-content: space-between; gap: 10px; text-align: left; padding: 10px 16px; border-bottom: 1px solid #f2f2f2; }
.sr-l b { font-size: 15px; }
.sr-l p { margin: 3px 0 0; font-size: 14px; color: #555; }
.sr-row > span { font-size: 12px; color: var(--sub); flex: none; }
.sr-none { padding: 40px 16px; text-align: center; color: var(--sub); }
mark { background: #ffe58f; color: inherit; border-radius: 3px; padding: 0 1px; }
.sr-thread { position: absolute; inset: 0; z-index: 11; background: var(--chat-bg); display: flex; flex-direction: column; padding-top: calc(44px + var(--safe-t)); }
.sr-th-top { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 6px 14px 10px; color: #1b2333; }
.sr-th-top button { font-size: 24px; width: 30px; text-align: left; }
.msg.hit .bub { box-shadow: 0 0 0 3px #ffe58f; }

/* Uber */
.uber { background: #000; color: #fff; }
.ub-head { padding: 6px 16px 10px; }
.ub-head h1 { margin: 0; font-size: 34px; }
.ub-sub { font-size: 18px; margin-top: 12px; font-weight: 600; }
.ub-card { display: block; width: calc(100% - 32px); margin: 0 16px 16px; text-align: left; border: 1px solid #333; border-radius: 16px; padding: 12px; }
.ub-map { height: 140px; border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.ub-map svg { width: 100%; height: 100%; display: block; }
.ub-map.big { height: 200px; border-radius: 0; margin: 0; }
.ub-card b { font-size: 18px; }
.ub-card p { margin: 4px 0 0; color: #aeaeb2; font-size: 14px; }
.ub-again { display: inline-block; margin-top: 12px; background: #262626; padding: 7px 14px; border-radius: 999px; font-size: 14px; }
.ub-row { display: flex; gap: 14px; align-items: center; padding: 10px 16px; }
.ub-car { width: 64px; height: 64px; border-radius: 12px; background: #1c1c1e; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.ub-row b { font-size: 16px; }
.ub-row p { margin: 2px 0 0; color: #aeaeb2; font-size: 13px; }
.ub-detail { padding: 16px; }
.ub-detail h2 { margin: 0 0 8px; font-size: 26px; }
.ub-detail > p { margin: 2px 0; color: #d1d1d6; }
.ub-stop { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; font-size: 15px; }
.ub-stop span { flex: 1; color: #d1d1d6; }
.ub-stop em { font-style: normal; color: #aeaeb2; font-size: 13px; }
.ub-stop .dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid #fff; margin-top: 5px; flex: none; }
.ub-stop .sq { width: 9px; height: 9px; border: 2px solid #fff; margin-top: 5px; flex: none; }
.ub-line { margin-top: 24px; padding-top: 16px; border-top: 1px solid #333; color: #d1d1d6; }

/* 備忘錄 */
.notes { background: #f2f2f7; }
.nt-head { padding: 0 16px 10px; }
.nt-head h1 { margin: 0; font-size: 32px; }
.nt-count { color: var(--sub); font-size: 14px; }
.nt-group { margin: 6px 16px; }
.nt-gh { font-size: 19px; font-weight: 700; margin: 8px 0; }
.nt-card { background: #fff; border-radius: 12px; overflow: hidden; }
.nt-row { display: block; width: 100%; text-align: left; padding: 12px 14px; }
.nt-row + .nt-row { border-top: 1px solid #ececf0; }
.nt-row b { font-size: 16px; }
.nt-row p { margin: 3px 0 0; color: var(--sub); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-doc { background: #fff; padding: 4px 20px 80px; }
.nt-time { text-align: center; color: var(--sub); font-size: 13px; margin: 4px 0 12px; }
.nt-doc p { margin: 0; font-size: 16px; line-height: 1.75; }
.nt-doc .nt-h { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
.nt-doc .nt-sub { font-weight: 700; }

/* Safari */
.safari { background: #f2f2f7; }
.sf-start { flex: 1; padding: 16px; }
.sf-start h2 { font-size: 20px; margin: 10px 0 12px; }
.sf-recent { display: block; width: 100%; text-align: left; background: #fff; border-radius: 12px; padding: 13px 14px; font-size: 16px; margin-bottom: 8px; }
.sf-bar { flex: none; margin: 0 12px calc(34px + var(--safe-b)); background: #fff; border-radius: 14px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; color: #3a3a3c; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.sf-bar button { color: var(--ios-blue); font-size: 22px; }
.sf-page { background: #fff; padding: 12px 16px 30px; }
.gg-logo { text-align: center; font-size: 34px; font-weight: 500; margin: 6px 0 12px; letter-spacing: -1px; }
.gg-box { border: 1px solid #dfe1e5; border-radius: 24px; padding: 11px 16px; font-size: 16px; box-shadow: 0 1px 6px rgba(32,33,36,.12); }
.gg-tabs { display: flex; gap: 18px; font-size: 14px; color: #5f6368; margin: 14px 2px 10px; border-bottom: 1px solid #eee; padding-bottom: 8px; }
.gg-tabs .on { color: #000; font-weight: 600; border-bottom: 2px solid #000; padding-bottom: 6px; }
.gg-site { font-size: 14px; color: #202124; }
.gg-site small { color: #5f6368; }
.gg-title { color: #1a0dab; font-size: 20px; margin: 6px 0 4px; }
.gg-desc { color: #4d5156; font-size: 14px; line-height: 1.6; margin-bottom: 8px; }
.gg-link { display: flex; justify-content: space-between; padding: 13px 2px; border-top: 1px solid #eee; font-size: 16px; }
.gg-link span { color: #9aa0a6; }

.dev-btn { position: fixed; right: 8px; bottom: 8px; z-index: 999; background: #ff3b30; color: #fff; font-size: 12px; padding: 6px 10px; border-radius: 8px; opacity: .8; }

/* ? 發亮引導 */
.pv-q.glow { background: #ffd27a; animation: glow 1.4s ease-in-out infinite; }
@keyframes glow { 0%,100% { box-shadow: 0 0 0 0 rgba(255,210,122,.9), 0 0 18px 4px rgba(255,210,122,.6); } 50% { box-shadow: 0 0 0 10px rgba(255,210,122,0), 0 0 28px 10px rgba(255,210,122,.85); } }
.pv-info.show { animation: none; }
.pv-info.show.anim { animation: sheetUp .3s ease-out; }
/* 問答框裡的系統引導 */
.q-guide { display: flex; gap: 8px; align-items: flex-start; background: #fdf1e1; color: #8a4f12; border-radius: 10px; padding: 10px 12px; font-size: 14px; line-height: 1.6; margin: -4px 0 14px; }
.q-guide b { flex: none; font-size: 12px; background: #f6d8b0; border-radius: 999px; padding: 1px 8px; margin-top: 1px; }
.gg-res + .gg-res { margin-top: 18px; padding-top: 14px; border-top: 1px solid #eee; }

/* 二選一 */
.q-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.q-choice { padding: 16px 10px; border-radius: 14px; background: #f2f2f7; font-size: 17px; font-weight: 600; }
.q-choice:active { background: #e3ecff; color: var(--ios-blue); }

/* 新圖示 */
.ic-ig { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 40%, #d6249f 65%, #285aeb 100%); }
.ic-maps { background: #fff; }
.ic-gmail { background: #fff; }

/* Instagram */
.ig { background: #000; color: #fff; }
.ig-top { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 4px 18px 10px; font-size: 20px; }
.ig-search { margin: 0 14px 12px; background: #262626; border-radius: 12px; padding: 9px 12px; color: #a8a8a8; font-size: 15px; }
.ig-h { display: flex; justify-content: space-between; padding: 4px 16px 8px; font-size: 16px; }
.ig-h span { color: #a8a8a8; font-size: 14px; }
.ig-row { width: 100%; display: flex; gap: 12px; align-items: center; padding: 8px 16px; text-align: left; }
.ig-av { flex: none; width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; line-height: 1.15; text-align: center; }
.ig-av.sm { width: 34px; height: 34px; font-size: 8.5px; }
.ig-mid { min-width: 0; }
.ig-mid b { font-size: 15px; font-weight: 600; }
.ig-mid p { margin: 2px 0 0; color: #a8a8a8; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.igt-top { flex: none; display: flex; align-items: center; gap: 10px; padding: 4px 14px 10px; border-bottom: 1px solid #262626; }
.igt-top .nav-back { color: #fff; font-size: 26px; width: 22px; }
.igt-name b { display: block; font-size: 16px; }
.igt-name small { color: #a8a8a8; font-size: 12px; }
.igt-body { padding: 10px 12px 20px; }
.igt-day { text-align: center; color: #a8a8a8; font-size: 12px; margin: 16px 0 10px; }
.igt-msg { display: flex; margin-bottom: 6px; }
.igt-msg.me { justify-content: flex-end; }
.igt-bub { max-width: 76%; padding: 10px 14px; border-radius: 20px; font-size: 15px; line-height: 1.5; background: #262626; }
.igt-msg.me .igt-bub { background: linear-gradient(135deg, #7b4dff, #a136e8); }
.igt-input { flex: none; margin: 6px 12px calc(30px + var(--safe-b)); background: #1c1c1c; border-radius: 22px; padding: 11px 16px; color: #a8a8a8; font-size: 15px; }

/* Gmail */
.gm { background: #1f1f1f; color: #e3e3e3; }
.gm-search { margin: 4px 14px 10px; background: #2d2f31; border-radius: 26px; padding: 13px 16px; color: #c4c7c5; font-size: 16px; }
.gm-h { padding: 4px 18px 6px; font-size: 13px; color: #c4c7c5; }
.gm-row { width: 100%; display: flex; gap: 14px; padding: 10px 16px; text-align: left; }
.gm-av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 16px; }
.gm-mid { flex: 1; min-width: 0; }
.gm-l1 { display: flex; justify-content: space-between; gap: 8px; }
.gm-l1 b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-l1 span { font-size: 12px; color: #c4c7c5; flex: none; }
.gm-sub { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.gm-mid p { margin: 2px 0 0; font-size: 13px; color: #a8abad; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-doc { padding: 4px 18px 60px; }
.gm-doc h2 { font-size: 21px; font-weight: 500; margin: 6px 0 16px; line-height: 1.4; }
.gm-from { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.gm-from b { display: block; font-size: 15px; }
.gm-from small { color: #a8abad; }
.gm-doc p { margin: 0; font-size: 15px; line-height: 1.75; }

/* 地圖 */
.maps { background: #fff; }
.mp-search { margin: 6px 14px 10px; border-radius: 26px; padding: 13px 16px; color: #5f6368; font-size: 16px; box-shadow: 0 1px 6px rgba(32,33,36,.2); }
.mp-chips { display: flex; gap: 8px; padding: 0 14px 12px; }
.mp-chips span { background: #e8f0fe; color: #1a73e8; padding: 7px 14px; border-radius: 18px; font-size: 14px; }
.mp-h { padding: 8px 18px; font-size: 14px; color: #5f6368; border-top: 6px solid #f1f3f4; }
.mp-row { display: flex; gap: 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid #f1f3f4; }
.mp-ic { width: 28px; height: 28px; border-radius: 50%; background: #f1f3f4; display: flex; align-items: center; justify-content: center; font-size: 14px; flex: none; }
.mp-row b { font-size: 16px; font-weight: 500; }
.mp-row p { margin: 2px 0 0; font-size: 13px; color: #70757a; }

/* 九宮格密碼訊息 */
.kp { background: #fff; color: #1c1c1e; border-radius: 18px; padding: 12px; width: 220px; }
.kp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.kp-k { background: #f2f2f7; border-radius: 10px; padding: 6px 0 4px; text-align: center; line-height: 1.1; }
.kp-k b { display: block; font-size: 19px; font-weight: 500; }
.kp-k small { display: block; font-size: 9px; letter-spacing: .12em; color: #6e6e73; min-height: 10px; }
.kp-code { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; font-size: 15px; font-weight: 700; letter-spacing: .04em; line-height: 1.6; }
.kp-code span { white-space: nowrap; }

/* 來電／通話 */
#call { position: absolute; inset: 0; z-index: 65; display: none; background: linear-gradient(180deg, #3b4a5e 0%, #1c2430 100%); color: #fff; }
#call.show { display: block; animation: scrIn .3s ease-out; }
.call-in { height: 100%; display: flex; flex-direction: column; align-items: center; padding: calc(80px + var(--safe-t)) 24px calc(50px + var(--safe-b)); }
.call-av .av { width: 96px; height: 96px; font-size: 44px; }
.call-name { font-size: 28px; font-weight: 500; margin-top: 16px; }
.call-st { font-size: 16px; opacity: .75; margin-top: 6px; }
.call-cap { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px 4px; }
.call-cap p { margin: 0; font-size: 18px; line-height: 1.7; background: rgba(0,0,0,.25); padding: 12px 16px; border-radius: 14px; animation: popIn .3s ease-out; }
.call-btns { display: flex; gap: 34px; margin-bottom: 34px; }
.call-btns span { width: 66px; height: 66px; border-radius: 50%; background: rgba(255,255,255,.16); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 22px; }
.call-btns small { font-size: 10px; opacity: .8; margin-top: 2px; }
.call-end { width: 74px; height: 74px; border-radius: 50%; background: #ff3b30; display: flex; align-items: center; justify-content: center; }

.tile-play { position: absolute; right: 6px; top: 5px; font-size: 11px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.pv-redo { position: absolute; right: 16px; bottom: 14px; z-index: 2; background: rgba(255,255,255,.18); color: #fff; font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 999px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* LINE 裡的 Threads 分享卡片 */
.thl { display: flex; width: 240px; background: #fff; border-radius: 16px; overflow: hidden; text-align: left; }
.thl-img { flex: none; width: 84px; background: #f2f2f7; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.thl-img .kp { transform: scale(.36); transform-origin: center; margin: -70px; }
.thl-body { padding: 10px 12px; min-width: 0; }
.thl-body b { display: block; font-size: 13px; line-height: 1.4; }
.thl-body p { margin: 4px 0; font-size: 12px; color: #555; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.thl-body small { font-size: 11px; color: #999; }
.vid.fin { background: linear-gradient(135deg, #6b4f3f, #2a1f1a); }

/* Threads 貼文畫面 */
.thr { background: #101010; color: #f3f5f7; }
.thr-top { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 4px 16px 10px; border-bottom: 1px solid #262626; }
.thr-top .nav-back { color: #fff; font-size: 26px; width: 30px; }
.thr-post { padding: 14px 16px 10px; border-bottom: 1px solid #262626; }
.thr-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.thr-head b { font-size: 15px; }
.thr-av { flex: none; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; }
.thr-av.sm { width: 32px; height: 32px; font-size: 13px; background: #333; }
.thr-time { color: #777; font-size: 13px; margin-left: 6px; }
.thr-text { font-size: 15px; line-height: 1.6; }
.thr-text.sub { color: #a8a8a8; font-size: 14px; margin-top: 8px; }
.thr-media { margin-top: 10px; display: flex; justify-content: center; background: #1e1e1e; border-radius: 14px; padding: 14px 0; }
.thr-acts { display: flex; gap: 18px; margin-top: 12px; color: #a8a8a8; font-size: 13px; }
.thr-h { padding: 12px 16px 4px; font-weight: 600; font-size: 14px; }
.thr-c { display: flex; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #1e1e1e; }
.thr-cm b { font-size: 14px; }
.thr-cm p { margin: 3px 0; font-size: 14px; line-height: 1.5; }
.thr-cm small { color: #777; font-size: 12px; }
.thr-end { text-align: center; color: #666; font-size: 13px; padding: 18px 0 70px; }

/* 來電：接聽／拒絕 */
.call-ans { display: flex; gap: 90px; margin-bottom: 20px; }
.call-ans button { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; font-size: 14px; }
.call-ans span { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.call-dec span { background: #ff3b30; }
.call-acc span { background: #34c759; animation: glow 1.4s ease-in-out infinite; }

/* 最後影片預覽播放器 */
#player { position: absolute; inset: 0; z-index: 75; display: none; background: #000; }
#player.show { display: block; }
.pl { position: absolute; inset: 0; }
.pl-bars { position: absolute; top: calc(10px + var(--safe-t)); left: 10px; right: 10px; display: flex; gap: 3px; z-index: 3; }
.pl-bars i { flex: 1; height: 3px; background: rgba(255,255,255,.3); border-radius: 2px; overflow: hidden; }
.pl-bars b { display: block; height: 100%; width: 0; background: #fff; }
.pl-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.pl-img, .pl-vid { width: 100%; height: 100%; object-fit: cover; animation: kb 3.2s ease-out forwards; }
.pl-vid { animation: none; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.08); } }
.pl-card { text-align: center; color: #fff; padding: 0 30px; animation: popIn .6s ease-out; }
.pl-card b { display: block; font-size: 22px; letter-spacing: .12em; line-height: 1.6; }
.pl-card small { display: block; margin-top: 10px; opacity: .7; letter-spacing: .2em; }
.pl-cap { position: absolute; left: 16px; bottom: calc(40px + var(--safe-b)); color: #fff; font-size: 14px; text-shadow: 0 1px 4px rgba(0,0,0,.8); z-index: 3; }
.pl-tag { position: absolute; top: calc(24px + var(--safe-t)); left: 12px; font-size: 11px; color: #fff; background: rgba(255,59,48,.8); padding: 3px 8px; border-radius: 6px; z-index: 3; }
.pl-x { position: absolute; top: calc(22px + var(--safe-t)); right: 12px; z-index: 4; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; }
.pl-again { position: absolute; bottom: calc(90px + var(--safe-b)); left: 50%; transform: translateX(-50%); background: #fff; color: #000; font-weight: 700; padding: 11px 28px; border-radius: 999px; z-index: 4; }

/* 測試用跳關 */
.dev-btn { display: none; }
.dev-bar { position: fixed; right: 6px; bottom: 6px; z-index: 999; display: flex; gap: 4px; }
.dev-bar button { background: #ff3b30; color: #fff; font-size: 11px; padding: 5px 7px; border-radius: 7px; opacity: .85; }

/* 地圖：完整路線 */
.mp-route { display: flex; align-items: center; gap: 12px; width: calc(100% - 28px); margin: 0 14px 12px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, #fff4e8, #eef7f5); text-align: left; box-shadow: 0 1px 4px rgba(0,0,0,.08); animation: popIn .4s ease-out; }
.mp-route-ic { font-size: 26px; }
.mp-route b { font-size: 16px; }
.mp-route p { margin: 2px 0 0; font-size: 13px; color: #5f6368; }
.mp-go { margin-left: auto; font-size: 22px; color: #9aa0a6; }

/* 影片字幕 */
.pl-sub { position: absolute; left: 0; right: 0; bottom: calc(90px + var(--safe-b)); text-align: center; color: #fff; font-size: 22px; font-weight: 600; letter-spacing: .04em; text-shadow: 0 2px 8px rgba(0,0,0,.7); z-index: 3; padding: 0 20px; }

/* 每個 App 左上角的返回 */
.app-back { flex: none; align-self: flex-start; padding: 2px 16px 6px; color: var(--ios-blue); font-size: 17px; }
.app-back.dark { color: #fff; }

/* 雲端備份狀態 */
.pv-cloud { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 2; font-size: 12px; color: #fff; background: rgba(0,0,0,.45); padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.pv-cloud:empty { display: none; }
.pv-cloud.ok { background: rgba(52,199,89,.75); }
.pv-cloud.fail { background: rgba(255,59,48,.85); }

/* 完整路線 */
.rt .scroll { background: #f6f2ea; }
.rt-head { padding: 0 20px 10px; }
.rt-head h1 { margin: 0; font-size: 28px; letter-spacing: .02em; }
.rt-head p { margin: 4px 0 0; color: #8a7f74; font-size: 13px; }
.rt-map { margin: 0 12px 14px; border-radius: 22px; overflow: hidden; background: #f6f2ea; box-shadow: 0 2px 14px rgba(90,74,58,.10), inset 0 0 0 1px #ece5d9; }
.rt-svg { display: block; width: 100%; height: auto; }
.rt-pin { cursor: pointer; }
.rt-pin:active circle { opacity: .8; }
.rt-full { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 12px 90px; padding: 15px; border-radius: 16px; background: #2b2622; color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: 0 4px 14px rgba(43,38,34,.25); }
.rt-full::before { content: "🗺️"; }