/* xsmartlive 公開層(W3 #211)—— tokens 抄自 handoff.md §A(與 ui_v2/app.css 同值,不立第二套色值)。
   手機優先:預設單欄,≥768 才展開雙欄;字型與 ui_v2 共用自帶檔(/ui/v2/static/fonts.css)。 */
:root{
  --brand-50:#EEF3FE; --brand-100:#D9E4FC; --brand-500:#2E5BDA; --brand-600:#2549B8; --brand-700:#1D3A94;
  --on-brand:#FFFFFF;
  --ok-50:#E4F4EC;    --ok-500:#188A55;    --ok-700:#0F5F3A;
  --warn-50:#FCF1DC;  --warn-500:#B0700A;  --warn-700:#7C4E06;
  --danger-50:#FBE7E8;--danger-500:#C93A3F;--danger-700:#9A272C;
  --info-50:#E8F1F8;  --info-500:#28679B;  --info-700:#1C4A72;
  --live-500:#E5484D; --on-live:#FFFFFF;
  --bg:#F5F6F9; --surface:#FFFFFF; --surface-2:#EDF0F5; --border:#D8DDE6;
  --ink:#1A1F29; --ink-2:#4B5565; --ink-3:#8892A3;
  --sh-1:0 1px 2px rgb(20 25 40 / .06); --sh-2:0 4px 12px rgb(20 25 40 / .10); --sh-3:0 12px 32px rgb(20 25 40 / .16);
  --r-sm:6px; --r-md:10px; --r-full:999px;
  --font-ui:Manrope,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --brand-50:#1B2440; --brand-100:#243158; --brand-500:#7C9BFF; --brand-600:#93ADFF; --brand-700:#AEC1FF;
    --on-brand:#0F1524;
    --ok-50:#143024;    --ok-500:#4BC98A;    --ok-700:#7FD8AC;
    --warn-50:#33270D;  --warn-500:#E8A93D;  --warn-700:#F0C070;
    --danger-50:#3A181A;--danger-500:#F27E82;--danger-700:#F5A3A6;
    --info-50:#14293B;  --info-500:#6FAAD9;  --info-700:#9CC4E4;
    --live-500:#FF6B6F; --on-live:#331112;
    --bg:#12151B; --surface:#1B1F27; --surface-2:#232935; --border:#333B4A;
    --ink:#E9ECF2; --ink-2:#A6AFC0; --ink-3:#707B90;
    --sh-1:0 1px 2px rgb(0 0 0 / .35); --sh-2:0 4px 12px rgb(0 0 0 / .45); --sh-3:0 12px 32px rgb(0 0 0 / .55);
  }
}
:root[data-theme="dark"]{
  --brand-50:#1B2440; --brand-100:#243158; --brand-500:#7C9BFF; --brand-600:#93ADFF; --brand-700:#AEC1FF;
  --on-brand:#0F1524;
  --ok-50:#143024;    --ok-500:#4BC98A;    --ok-700:#7FD8AC;
  --warn-50:#33270D;  --warn-500:#E8A93D;  --warn-700:#F0C070;
  --danger-50:#3A181A;--danger-500:#F27E82;--danger-700:#F5A3A6;
  --info-50:#14293B;  --info-500:#6FAAD9;  --info-700:#9CC4E4;
  --live-500:#FF6B6F; --on-live:#331112;
  --bg:#12151B; --surface:#1B1F27; --surface-2:#232935; --border:#333B4A;
  --ink:#E9ECF2; --ink-2:#A6AFC0; --ink-3:#707B90;
  --sh-1:0 1px 2px rgb(0 0 0 / .35); --sh-2:0 4px 12px rgb(0 0 0 / .45); --sh-3:0 12px 32px rgb(0 0 0 / .55);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font:16px/1.6 var(--font-ui); font-variant-numeric:tabular-nums}
a{color:var(--brand-500)}
button{font:inherit; cursor:pointer; color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--brand-500); outline-offset:2px}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important; scroll-behavior:auto !important} }
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-999px; top:8px; background:var(--surface); padding:8px 12px; border-radius:var(--r-sm); z-index:99}
.skip:focus{left:8px}

.wrap{max-width:1080px; margin:0 auto; padding:0 20px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 18px;
  border:1px solid var(--border); background:var(--surface); color:var(--ink); border-radius:8px; font-weight:500;
  text-decoration:none; transition:background 120ms ease, border-color 120ms ease}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--brand-500); border-color:var(--brand-500); color:var(--on-brand); font-weight:700}
.btn.primary:hover{background:var(--brand-600); border-color:var(--brand-600)}
.btn.ghost{border-color:transparent; background:transparent; color:var(--brand-500)}
.btn.lg{min-height:52px; padding:14px 24px; font-size:17px; width:100%}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btn.wide{width:100%}

.card{border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); box-shadow:var(--sh-1); padding:20px}
.tag{display:inline-flex; align-items:center; gap:4px; font-size:12px; padding:2px 9px; border-radius:var(--r-full); font-weight:600; white-space:nowrap}
.tag.ai{background:var(--info-50); color:var(--info-700)}
.tag.order{background:var(--ok-50); color:var(--ok-700)}
.tag.block{background:var(--surface-2); color:var(--ink-2); text-decoration:line-through}
.tag.human{background:var(--warn-50); color:var(--warn-700)}
.tag.neutral{background:var(--surface-2); color:var(--ink-2)}
.tag.lock{background:var(--brand-50); color:var(--brand-700)}
.muted{color:var(--ink-2)}
.small{font-size:14px}
.mono{font-family:var(--font-mono); font-size:.93em}

/* ---------- 頂欄 ---------- */
.nav{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--border)}
.nav .wrap{display:flex; align-items:center; gap:14px; min-height:60px}
.logo{display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink); font-weight:800; font-size:18px; letter-spacing:-.01em}
.logo .mark{width:26px; height:26px; border-radius:7px; background:var(--brand-500); color:var(--on-brand);
  display:inline-grid; place-items:center; font-weight:800; font-size:15px; line-height:1}
.nav .links{display:none; gap:4px; margin-left:8px}
.nav .links a{color:var(--ink-2); text-decoration:none; padding:8px 10px; border-radius:var(--r-sm); font-size:15px}
.nav .links a:hover{background:var(--surface-2); color:var(--ink)}
.nav .acts{margin-left:auto; display:flex; gap:8px; align-items:center}
.nav .acts .btn{min-height:40px; padding:8px 14px}
@media (min-width:768px){ .nav .links{display:flex} }

/* ---------- Hero ---------- */
.hero{padding:40px 0 28px}
.hero .grid{display:grid; gap:28px; align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--brand-700);
  background:var(--brand-50); padding:4px 12px; border-radius:var(--r-full)}
h1{font-size:clamp(28px, 5.6vw, 44px); line-height:1.22; letter-spacing:-.02em; margin:14px 0 12px; font-weight:800}
.lead{font-size:17px; color:var(--ink-2); margin:0 0 20px; max-width:34em}
.cta{display:flex; flex-direction:column; gap:10px}
.cta .btn{min-height:52px; font-size:16px}
.fine{margin-top:14px; font-size:14px; color:var(--ink-2)}
@media (min-width:768px){
  .hero{padding:64px 0 40px}
  .hero .grid{grid-template-columns:1.15fr 1fr}
  .cta{flex-direction:row}
  .cta .btn{width:auto}
}

/* 示範畫面(構圖示意,非實拍):與監控頁 .preview 同構圖語言 */
.demo{position:relative; aspect-ratio:9/13; max-width:320px; margin:0 auto; border-radius:14px; overflow:hidden; box-shadow:var(--sh-3);
  background:radial-gradient(120% 90% at 50% 12%, rgb(255 255 255 / .16), transparent 55%), linear-gradient(168deg,#3D4B8F 0%,#232B54 58%,#161B36 100%)}
.demo .sil{position:absolute; left:14%; right:14%; bottom:0; width:72%; opacity:.55}
.demo .mark{position:absolute; top:12px; left:12px; font-size:12px; font-weight:700; background:rgb(0 0 0 / .55); color:#fff; border-radius:var(--r-full); padding:4px 11px}
.demo .live{position:absolute; top:12px; right:12px; font-size:11px; font-weight:800; background:var(--live-500); color:var(--on-live); border-radius:var(--r-full); padding:3px 10px}
.demo .price{position:absolute; left:12px; right:12px; bottom:56px; background:rgb(255 255 255 / .94); color:#1A1F29; border-radius:10px; padding:10px 12px; font-size:13px; box-shadow:var(--sh-2)}
.demo .price b{display:block; font-size:14px}
.demo .price .slot{display:inline-block; margin-top:4px; font-size:12px; color:#4B5565; border:1px dashed #8892A3; border-radius:6px; padding:1px 8px}
.demo .cap{position:absolute; left:12px; right:12px; bottom:12px; font-size:12px; color:#fff; background:rgb(0 0 0 / .45); border-radius:6px; padding:5px 8px; text-align:center}
/* #252 示範直播 30 秒:同一個 .demo 框(9:13、320 寬、圓角);poster = 構圖示意 SVG;preload=none 不動首繪 */
.demo.vid{display:block; width:100%; height:auto; object-fit:cover; background:#161B36}
.demo-note{max-width:320px; margin:8px auto 0; text-align:center}

/* ---------- 區塊 ---------- */
.sec{padding:36px 0}
.sec h2{font-size:clamp(22px, 3.6vw, 30px); line-height:1.3; letter-spacing:-.015em; margin:0 0 8px; font-weight:800}
.sec .sub{color:var(--ink-2); margin:0 0 20px; max-width:40em}
.cols{display:grid; gap:14px}
@media (min-width:768px){ .sec{padding:56px 0} .cols.c3{grid-template-columns:repeat(3,1fr)} .cols.c2{grid-template-columns:repeat(2,1fr)} }
.step .n{width:34px; height:34px; border-radius:50%; background:var(--brand-500); color:var(--on-brand); display:grid; place-items:center; font-weight:800; margin-bottom:12px}
.step h3{margin:0 0 6px; font-size:18px}
.step p{margin:0; color:var(--ink-2)}
.step .pic{height:76px; margin:0 0 12px; border-radius:8px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; gap:10px; color:var(--ink-2); font-size:13px}

.plats{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 12px}
.plat{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:var(--r-full); padding:6px 14px 6px 6px; background:var(--surface); font-size:15px; font-weight:500}
.plogo{width:26px; height:26px; border-radius:7px; display:inline-grid; place-items:center; color:#fff; font-weight:800; font-size:12px; line-height:1}
.plogo.fb{background:#1877F2}
.plogo.ig{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)}
.plogo.yt{background:#FF0000}
.plogo.tt{background:#161823; box-shadow:inset 0 0 0 1px rgb(255 255 255 / .28)}
.plat .st{font-size:12px; color:var(--ink-2); font-weight:400}

.feed{display:flex; flex-direction:column; gap:8px}
.cmt{border:1px solid var(--border); border-radius:8px; padding:10px 12px; background:var(--surface)}
.cmt .who{font-size:13px; color:var(--ink-2); display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-weight:500}
.cmt .txt{margin:3px 0 0; font-size:15px}
.cmt .re{margin-top:6px; padding:6px 10px; border-left:3px solid var(--brand-100); background:var(--surface-2); font-size:13.5px; color:var(--ink-2); border-radius:0 6px 6px 0}
.list{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.list li{display:flex; gap:10px; align-items:flex-start}
.list .ic{flex:0 0 22px; width:22px; height:22px; border-radius:50%; background:var(--ok-50); color:var(--ok-700); display:grid; place-items:center; font-size:12px; font-weight:800; margin-top:2px}
.list b{display:block}
.list span{color:var(--ink-2); font-size:14px}

.trust h3{margin:0 0 6px; font-size:17px}
.trust p{margin:0; color:var(--ink-2); font-size:15px}
.lockrow{display:flex; gap:8px; align-items:center; background:var(--brand-50); color:var(--brand-700); border-radius:8px; padding:8px 10px; font-size:14px; font-weight:600; margin-top:10px}
.lockrow svg{width:14px; height:14px; fill:currentColor; flex:0 0 auto}

.plan{display:grid; gap:14px}
@media (min-width:768px){ .plan{grid-template-columns:1.2fr 1fr; align-items:start} }
.quota{width:100%; border-collapse:collapse; font-size:15px}
.quota th,.quota td{text-align:left; padding:10px 4px; border-bottom:1px solid var(--border)}
.quota th{color:var(--ink-2); font-weight:500; font-size:13px}
.quota td.v{text-align:right; color:var(--ink-2)}
.price-big{font-size:28px; font-weight:800; letter-spacing:-.01em; margin:4px 0 2px}

.faq details{border:1px solid var(--border); border-radius:8px; background:var(--surface); padding:0 16px; margin-bottom:8px}
.faq summary{cursor:pointer; padding:14px 0; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--ink-3); font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 14px; color:var(--ink-2)}

.foot{border-top:1px solid var(--border); padding:28px 0 40px; color:var(--ink-2); font-size:14px}
.foot .wrap{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center}
.foot a{color:var(--ink-2)}
.foot .sp{flex:1}

/* ---------- 文件頁(#252:/help 使用說明;/privacy /terms 佔位)---------- */
.doc{padding:32px 0 56px}
.doc .wrap{max-width:720px}
.doc h1{font-size:clamp(26px, 4.6vw, 34px); line-height:1.25; letter-spacing:-.02em; margin:0 0 8px}
.doc h2{font-size:20px; margin:28px 0 8px}
.doc p,.doc li{color:var(--ink-2)}
.doc ol,.doc ul{padding-left:22px}
.doc li{margin:4px 0}
.doc .card{margin-top:20px}
.doc .toc{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; padding:0; list-style:none}
.doc .toc a{display:inline-block; border:1px solid var(--border); border-radius:var(--r-full); padding:4px 12px; font-size:14px; text-decoration:none; background:var(--surface); color:var(--ink-2)}

/* ---------- 落地頁(註冊 / 登入 / 忘記密碼 / 驗證 / 重設)---------- */
.auth{min-height:calc(100vh - 60px); display:flex; align-items:flex-start; justify-content:center; padding:28px 16px 48px}
.auth .card{width:100%; max-width:440px; padding:24px 22px}
.auth h1{font-size:24px; margin:0 0 6px}
.auth .lead{font-size:15px; margin-bottom:16px}
.fl{display:block; font-size:14px; font-weight:600; color:var(--ink-2); margin:12px 0 5px}
.input{width:100%; border:1px solid var(--border); background:var(--surface); color:var(--ink); border-radius:8px; padding:11px 12px; font:inherit; min-height:46px}
.input:focus{border-color:var(--brand-500); outline:2px solid var(--brand-500); outline-offset:1px}
.hint{font-size:13px; color:var(--ink-2); margin-top:4px}
.form .btn.primary{margin-top:18px}
.links{display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:space-between; margin-top:16px; font-size:14px}
.notice{border-radius:8px; padding:12px 14px; font-size:14px; margin-top:14px; border:1px solid var(--border); background:var(--surface-2)}
.notice.err{background:var(--danger-50); color:var(--danger-700); border-color:transparent}
.notice.ok{background:var(--ok-50); color:var(--ok-700); border-color:transparent}
.notice.warn{background:var(--warn-50); color:var(--warn-700); border-color:transparent}
.notice a{color:inherit; font-weight:700}
.notice .url{display:block; margin-top:6px; word-break:break-all; font-family:var(--font-mono); font-size:12.5px}
.divider{display:flex; align-items:center; gap:10px; color:var(--ink-2); font-size:13px; margin:18px 0 8px}
.divider::before,.divider::after{content:""; flex:1; border-top:1px dashed var(--border)}