/* 播單首頁（未登入訪客看到的介紹頁）
   沿用 app.css 的色票與粗框硬陰影風格；只在 body.lp 底下生效，不影響後台。 */

body.lp{background:var(--bg);font-size:15px}
.lp .lp-in{max-width:1180px;margin:0 auto;padding:0 20px}
.lp .lp-hero .lp-in{max-width:1280px}
.lp .sp{flex:1}
.lp mark{background:var(--brand);padding:0 .18em;border:var(--bw) solid var(--ink);border-radius:10px;box-shadow:var(--sh);color:var(--ink);display:inline-block;transform:rotate(-3deg)}
.lp h1{font-size:clamp(38px,6.6vw,84px);line-height:1.08;letter-spacing:-.015em}
.lp h2{font-size:clamp(24px,3.6vw,36px);line-height:1.2}
.lp h3{font-size:18px}

/* ---------- 導覽 ---------- */
.lp-nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px);border-bottom:var(--bw) solid var(--ink);transition:box-shadow .2s}
.lp-nav.scrolled{box-shadow:0 4px 0 rgba(20,18,16,.08)}
.lp-nav-in{display:flex;align-items:center;gap:14px;height:68px}
.lp-brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-size:20px}
.lp-brand img{border-radius:10px;display:block;object-fit:contain}
.lp-links{display:flex;gap:4px;margin-left:10px}
.lp-links a{padding:8px 12px;border-radius:999px;text-decoration:none;font-weight:800;border:var(--bw) solid transparent}
.lp-links a:hover{background:var(--brand);border-color:var(--ink)}
.lp-lang{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 10px;border:var(--bw) solid var(--ink);border-radius:999px;background:var(--paper);text-decoration:none;font-weight:900;font-size:12px;box-shadow:2px 2px 0 var(--ink)}
.lp-lang svg{width:14px;height:14px}
.lp-login{height:40px}

/* ---------- Hero ---------- */
.lp-hero{background:var(--brand);border-bottom:var(--bw) solid var(--ink);position:relative;overflow:hidden}
.lp-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(20,18,16,.10) 1.2px,transparent 1.3px);background-size:22px 22px;pointer-events:none}
.lp-hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;padding-top:88px;padding-bottom:96px;min-height:min(860px,calc(100vh - 68px - 46px))}
.lp-kicker{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:var(--bw) solid var(--ink);border-radius:999px;background:var(--paper);font-weight:900;font-size:13px;box-shadow:2px 2px 0 var(--ink);margin-bottom:18px}
.lp-kicker svg{width:14px;height:14px}
.lp-lead{font-size:19px;line-height:1.75;color:var(--ink-2);margin:22px 0 30px;max-width:34em}
.lp-cta{display:flex;flex-wrap:wrap;gap:12px}
.lp-cta .btn{text-decoration:none}
.lp-trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;padding:0;margin:20px 0 0;font-weight:800;font-size:13px}
.lp-trust li{display:inline-flex;align-items:center;gap:5px}
.lp-trust svg{width:14px;height:14px;color:var(--green)}

/* 模擬直播 */
.lp-demo{background:var(--paper);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--sh-lg);overflow:hidden;transform:rotate(1.2deg)}
.demo-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:var(--bw) solid var(--ink);background:var(--ink);color:#fff;font-size:13px}
.demo-bar .demo-page{font-weight:800;opacity:.9}
.demo-eye{display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}
.demo-eye svg{width:13px;height:13px}
.live-dot{width:10px;height:10px;border-radius:50%;background:#ff4d4d;box-shadow:0 0 0 0 rgba(255,77,77,.7);animation:lp-pulse 1.6s infinite}
.demo-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);min-height:380px}
.demo-stage{position:relative;background:linear-gradient(160deg,var(--pink),var(--lav));border-right:var(--bw) solid var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px 12px}
.demo-panda{width:132px;height:132px;object-fit:contain;animation:lp-float 3.2s ease-in-out infinite;filter:drop-shadow(3px 3px 0 var(--ink))}
.demo-lot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;background:var(--paper);border:var(--bw) solid var(--ink);border-radius:12px;padding:8px 10px;box-shadow:2px 2px 0 var(--ink);font-size:13px;text-align:center}
.demo-price{font-family:var(--mono);font-weight:900}
.demo-kw{font-size:12px;font-weight:700}
.demo-kw code{background:var(--paper);border:1.5px solid var(--ink);font-weight:900}
.demo-chat{list-style:none;margin:0;padding:12px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;overflow:hidden;background:var(--paper-2)}
.demo-chat li{display:flex;align-items:center;gap:8px;background:var(--paper);border:1.5px solid var(--ink);border-radius:14px;padding:9px 12px;font-size:14px;animation:lp-pop .38s cubic-bezier(.2,.9,.3,1.3) both}
.demo-chat li .av{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font-size:11px;font-weight:900;flex:none}
.demo-chat li .nm{font-weight:900;white-space:nowrap}
.demo-chat li .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-chat li .tag{flex:none;animation:lp-pop .3s .25s both}
.demo-chat li.hit{background:var(--mint)}
.demo-win{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:var(--bw) solid var(--ink);font-weight:900;font-size:14px;background:var(--sun)}
.demo-win svg{width:14px;height:14px;vertical-align:-2px}
.demo-num{font-family:var(--mono);font-size:20px}
.demo-num.bump{animation:lp-bump .35s ease}

/* 跑馬燈 */
.lp-ticker{position:relative;border-top:var(--bw) solid var(--ink);background:var(--ink);color:var(--brand);overflow:hidden;white-space:nowrap}
.lp-ticker-track{display:inline-flex;gap:22px;padding:12px 0;animation:lp-marquee 36s linear infinite;font-weight:900;font-size:15px}
.lp-ticker i{font-style:normal;color:var(--paper)}

/* ---------- 區塊共用 ---------- */
.lp-sec{padding:84px 0}
.lp-head{text-align:center;max-width:720px;margin:0 auto 40px}
.lp-head p{margin-top:10px}
.lp-eyebrow{display:inline-block;font-weight:900;font-size:13px;letter-spacing:.08em;padding:4px 12px;border:var(--bw) solid var(--ink);border-radius:999px;background:var(--paper);margin-bottom:14px}

/* 三核心 */
.lp-core{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.lp-card{background:var(--paper);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:26px 22px;transition:transform .18s,box-shadow .18s}
.lp-card:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.lp-card p{color:var(--ink-2);line-height:1.7;margin:10px 0 14px}
.lp-card ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.lp-card li{font-weight:800;font-size:13px;display:flex;gap:6px;align-items:center}
.lp-card li::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--ink);transform:rotate(45deg);flex:none}
.lp-ico{width:56px;height:56px;border-radius:16px;border:var(--bw) solid var(--ink);display:grid;place-items:center;margin-bottom:14px;box-shadow:2px 2px 0 var(--ink);background:var(--paper)}
.lp-ico svg{width:28px;height:28px}
.c-sun .lp-ico{background:var(--sun)}.c-mint .lp-ico{background:var(--mint)}.c-sky .lp-ico{background:var(--sky)}

/* 流程 */
.lp-how{background:var(--paper-2);border-top:var(--bw) solid var(--ink);border-bottom:var(--bw) solid var(--ink)}
.lp-steps{list-style:none;margin:0 auto;padding:0;max-width:860px;display:grid;gap:18px;position:relative}
.lp-steps::before{content:"";position:absolute;left:31px;top:30px;bottom:30px;width:0;border-left:3px dashed var(--ink);opacity:.35}
.lp-steps li{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) 48px;gap:18px;align-items:center;background:var(--paper);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--sh);padding:18px 20px}
.lp-steps p{margin:6px 0 0;color:var(--ink-2);line-height:1.7}
.lp-step-n{width:64px;height:64px;border-radius:50%;border:var(--bw) solid var(--ink);background:var(--brand);display:grid;place-items:center;font-size:28px;font-weight:900;box-shadow:2px 2px 0 var(--ink);margin-left:-40px;transition:background .3s}
.lp-steps li.in .lp-step-n{background:var(--mint)}
.lp-step-ico{color:var(--muted)}.lp-step-ico svg{width:28px;height:28px}

/* 功能格 */
.lp-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.lp-feat{background:var(--paper);border:var(--bw) solid var(--ink);border-radius:var(--r);padding:16px 14px;display:flex;flex-direction:column;gap:6px;box-shadow:2px 2px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.lp-feat:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.lp-feat b{font-size:15px}
.lp-feat span:last-child{font-size:13px;color:var(--ink-2);line-height:1.6}
.lp-feat-ico{width:38px;height:38px;border-radius:12px;border:1.5px solid var(--ink);background:var(--brand-2);display:grid;place-items:center}
.lp-feat-ico svg{width:20px;height:20px}
.lp-feat:nth-child(3n+2) .lp-feat-ico{background:var(--mint)}.lp-feat:nth-child(3n) .lp-feat-ico{background:var(--sky)}

/* 方案 */
.lp-pricing{background:var(--brand);border-top:var(--bw) solid var(--ink);border-bottom:var(--bw) solid var(--ink)}
.lp-pricing .muted{color:var(--ink-2)}
.lp-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.lp-plan,.lp-addons{position:relative;background:var(--paper);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:26px 22px;display:flex;flex-direction:column}
.lp-plan ul,.lp-addons ul{list-style:none;padding:0;margin:14px 0 22px;display:grid;gap:9px;flex:1}
.lp-plan li,.lp-addons li{display:flex;gap:8px;align-items:flex-start;line-height:1.5}
.lp-plan li svg{width:14px;height:14px;margin-top:4px;color:var(--green);flex:none}
.lp-addons li svg{width:16px;height:16px;margin-top:2px;flex:none}
.lp-plan .btn{text-decoration:none;width:100%}
.lp-price{font-size:28px;font-weight:900;margin-top:10px;font-family:var(--mono)}
.lp-soon{display:inline-block;font-family:var(--font);font-size:15px;padding:4px 12px;border:1.5px dashed var(--ink);border-radius:999px;background:var(--paper-2)}
.lp-plan-pro{background:var(--ink);color:#fff;transform:translateY(-10px)}
.lp-plan-pro li svg{color:var(--brand)}
.lp-plan-pro .lp-soon{background:transparent;color:#fff;border-color:#fff}
.lp-plan-pro .btn.primary{background:var(--brand);color:var(--ink)}
.lp-badge{position:absolute;top:-14px;right:18px;background:var(--pink);color:var(--ink);border:var(--bw) solid var(--ink);border-radius:999px;padding:3px 12px;font-weight:900;font-size:12px;box-shadow:2px 2px 0 var(--ink);transform:rotate(3deg)}
.lp-addons{background:var(--paper-2)}
.lp-trial{text-align:center;margin:36px 0 0;font-weight:900;font-size:16px;display:flex;align-items:center;justify-content:center;gap:6px}
.lp-trial svg{width:16px;height:16px}

/* FAQ */
.lp-faq-in{max-width:860px}
.lp-faq{display:grid;gap:12px}
.lp-faq details{background:var(--paper);border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:2px 2px 0 var(--ink);overflow:hidden}
.lp-faq summary{display:flex;align-items:center;gap:12px;padding:16px 18px;font-weight:900;font-size:16px;cursor:pointer;list-style:none}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq-ico{margin-left:auto;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;flex:none;transition:transform .2s,background .2s}
.lp-faq-ico svg{width:16px;height:16px}
.lp-faq details[open] .lp-faq-ico{transform:rotate(45deg);background:var(--brand)}
.lp-faq details p{margin:0;padding:0 18px 18px;color:var(--ink-2);line-height:1.75}

/* 行動呼籲 */
.lp-final{padding:0 0 84px}
.lp-final-in{display:flex;align-items:center;gap:24px;background:var(--mint);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:28px 30px}
.lp-final-in h2{font-size:clamp(20px,3vw,28px)}
.lp-final-in p{margin:6px 0 0;color:var(--ink-2)}
.lp-final-in .btn{margin-left:auto;text-decoration:none;flex:none}
.lp-final-panda{width:88px;height:88px;object-fit:contain;flex:none;animation:lp-float 3.4s ease-in-out infinite;filter:drop-shadow(3px 3px 0 var(--ink))}

/* 頁尾 */
.lp-foot{border-top:var(--bw) solid var(--ink);background:var(--paper);padding:26px 0}
.lp-foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.lp-foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.lp-foot nav a{text-decoration:none;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.lp-foot nav a:hover{text-decoration:underline}
.lp-foot nav svg{width:13px;height:13px}
.lp-copy{margin-left:auto;color:var(--muted);font-size:13px}

/* ---------- 進場動畫 ---------- */
/* 只有 JS 有跑（html.js）才先藏起來，JS 掛掉內容照樣看得到 */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}
.js .lp-demo.reveal.in{transform:rotate(1.2deg)}
.js .lp-plan-pro.reveal.in{transform:translateY(-10px)}

@keyframes lp-pulse{0%{box-shadow:0 0 0 0 rgba(255,77,77,.7)}70%{box-shadow:0 0 0 9px rgba(255,77,77,0)}100%{box-shadow:0 0 0 0 rgba(255,77,77,0)}}
@keyframes lp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes lp-pop{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
@keyframes lp-bump{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes lp-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .lp-demo,.js .lp-demo.reveal.in{transform:none}
  .demo-panda,.lp-final-panda,.live-dot,.lp-ticker-track{animation:none}
  .demo-chat li,.demo-chat li .tag,.demo-num.bump{animation:none}
}

/* ---------- RWD ---------- */
@media (max-width:1000px){
  .lp-hero-in{grid-template-columns:1fr;gap:36px;padding-top:48px;padding-bottom:56px;min-height:0}
  .lp-demo,.js .lp-demo.reveal.in{transform:none}
  .lp-core{grid-template-columns:1fr}
  .lp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-plans{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .lp-plan-pro,.js .lp-plan-pro.reveal.in{transform:none}
}
@media (max-width:760px){
  .lp-links{display:none}
  .lp-login span{display:none}
  .lp-login{width:40px;padding:0}
  .lp-sec{padding:60px 0}
  .lp-lead{font-size:16px;margin:18px 0 24px}
  .lp-cta .btn{width:100%}
  .demo-body{grid-template-columns:1fr;min-height:0}
  .demo-stage{border-right:none;border-bottom:var(--bw) solid var(--ink);flex-direction:row;flex-wrap:wrap;padding:14px}
  .demo-panda{width:64px;height:64px}
  .demo-body{min-height:0}
  .demo-chat{height:220px}
  .lp-steps::before{display:none}
  .lp-steps li{grid-template-columns:48px minmax(0,1fr);padding:16px}
  .lp-step-n{width:48px;height:48px;font-size:22px;margin-left:0}
  .lp-step-ico{display:none}
  .lp-final-in{flex-direction:column;text-align:center;padding:24px 18px}
  .lp-final-in .btn{margin-left:0;width:100%}
  .lp-copy{margin-left:0}
}
@media (max-width:420px){
  .lp .lp-in{padding:0 16px}
  .lp-grid{grid-template-columns:1fr}
  .lp-brand b{font-size:17px}
}