/* 免費中文字體工具（IG／WhatsApp 貼圖）。沿用 site.css 的色彩與字體變數；只在 .tool-page 內生效。
 * 網頁模式與已安裝的 App 模式是同一頁：App 模式（display-mode: standalone，或 iOS 的 navigator.standalone → html.is-app）只隱藏網站版面。 */
.tool-page{--ta-line:#3A464B;--ta-mute:#CAD2D4;--ck1:#8E9895;--ck2:#7D8784;color:var(--cream);background:var(--night)}
.tool-page :focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.tool-page a{color:var(--cyan)}.tool-page a:hover{color:var(--cream)}
.tool-page button{-webkit-tap-highlight-color:transparent}
.tool-page .wrap{padding-inline:max(22px,env(safe-area-inset-left)) max(22px,env(safe-area-inset-right))}

/* ---------- 網頁模式：標題 ---------- */
.tw-head{padding-top:clamp(32px,5vw,64px);padding-bottom:20px}
.tw-intro{max-width:46em;margin-top:14px;color:var(--ta-mute)}
.tw-wrap{padding-bottom:8px}

/* ---------- 編輯器 ---------- */
.ta{background:var(--night2);border:1px solid var(--nline);border-radius:10px;padding:clamp(14px,2.2vw,24px)}
.ta-bar{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-bottom:10px}
.ta-bar-title{display:none;align-items:center;gap:10px;margin-right:auto;font-size:15px;letter-spacing:.12em}
.ta-bar-title img{border-radius:7px}
.ta-bar-actions{display:flex;gap:6px}
.ta-icon{width:44px;height:44px;border-radius:999px;border:1px solid var(--ta-line);background:transparent;color:var(--cream);font-size:18px;line-height:1;display:grid;place-items:center}
.ta-icon:hover{border-color:var(--cream)}
.ta-grid{display:grid;gap:14px 28px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"preview input" "preview phrases" "preview fonts" "preview styles" "preview export" "preview after";align-content:start}
.ta-preview{grid-area:preview;position:sticky;top:16px;align-self:start;min-width:0}
.ta-input{grid-area:input}.ta-phrases{grid-area:phrases}.ta-fonts,.ta-styles-row{grid-area:fonts}.ta-styles{grid-area:styles}.ta-export{grid-area:export}.ta-after{grid-area:after}
.ta-grid>*{min-width:0}
.ta-label{font-size:13px;letter-spacing:.2em;color:var(--ta-mute);margin:0 0 6px}
.ta-input label{display:block;font-size:13px;letter-spacing:.2em;color:var(--ta-mute);margin-bottom:6px}
.ta-input textarea{display:block;width:100%;min-height:78px;resize:vertical;border:1px solid var(--ta-line);border-radius:8px;background:var(--deep);color:var(--cream);padding:12px 14px;font-size:18px;line-height:1.6;font-family:var(--sans)}
.tool-wa .ta-input textarea{min-height:52px}
.ta-input textarea:focus{border-color:var(--pink);outline:0;box-shadow:0 0 0 2px rgba(245,63,137,.35)}
.ta-input-meta{display:flex;justify-content:space-between;align-items:center;min-height:32px;font-size:13px;color:var(--dim)}
.ta-count.is-over{color:var(--pink-soft)}
.ta-link{background:none;border:0;padding:6px 2px;color:var(--cyan);font-size:13px;letter-spacing:.08em;text-decoration:underline;text-underline-offset:3px;min-height:32px}
.ta-link:hover{color:var(--cream)}

.ta-stage{position:relative;display:grid;place-items:center;min-height:170px;padding:12px;border-radius:8px;overflow:hidden;background-color:var(--ck1);background-image:conic-gradient(var(--ck1) 25%,var(--ck2) 0 50%,var(--ck1) 0 75%,var(--ck2) 0);background-size:16px 16px}
.ta-stage[data-bg=light]{background:#F1EDE6}.ta-stage[data-bg=dark]{background:#111A1E}
.ta-stage canvas{display:block;width:auto;height:auto;max-width:100%;max-height:min(46vh,520px);max-height:min(46dvh,520px)}
.tool-wa .ta-stage{aspect-ratio:1/1;max-height:min(46vh,420px);max-height:min(46dvh,420px);margin-inline:auto;width:min(100%,420px)}
.tool-wa .ta-stage canvas{max-height:100%;max-width:100%}
.ta-empty,.ta-loading{position:absolute;inset:auto 12px 12px;margin:0;padding:6px 12px;border-radius:999px;background:rgba(9,14,17,.82);color:var(--cream);font-size:13px;text-align:center}
.ta-empty{inset:0;display:grid;place-items:center;border-radius:0;background:transparent;color:var(--ink);font-size:15px}
.ta-preview-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:8px}
.ta-bg{display:flex;gap:4px}
.ta-bg button{width:44px;height:44px;border-radius:999px;border:1px solid transparent;background:transparent;display:grid;place-items:center}
.ta-bg button[aria-pressed=true]{border-color:var(--cream)}
.ta-dot{width:22px;height:22px;border-radius:999px;border:1px solid var(--ta-line);display:block}
.ta-dot-check{background-color:var(--ck1);background-image:conic-gradient(var(--ck1) 25%,var(--ck2) 0 50%,var(--ck1) 0 75%,var(--ck2) 0);background-size:8px 8px}.ta-dot-light{background:#F1EDE6}.ta-dot-dark{background:#111A1E}
.ta-note{font-size:12px;color:var(--dim);margin:0;flex:1 1 180px;text-align:right}

.ta-chat{margin-top:12px;padding:12px 14px;border:1px solid var(--nline);border-radius:10px;background:var(--deep)}
.ta-chat-row{display:flex;margin-top:6px}.ta-chat-me{justify-content:flex-end}
.ta-bubble{padding:6px 14px;border-radius:14px 14px 14px 4px;background:#26343A;font-size:14px;color:var(--cream)}
.ta-chat canvas{width:96px;height:96px}

/* 字體選擇器 */
.ta-fonts-head{display:flex;justify-content:space-between;align-items:center}
.ta-font-strip{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.ta-font{flex:0 0 98px;display:grid;gap:2px;justify-items:center;align-content:start;min-height:100px;padding:10px 6px 8px;border:1px solid var(--ta-line);border-radius:10px;background:var(--deep);color:var(--cream);text-align:center;scroll-snap-align:start}
.ta-font-sample{font-size:30px;line-height:1.3;letter-spacing:.02em;color:var(--cream)}
.ta-font-name{font-size:12px;line-height:1.4;letter-spacing:.04em;overflow-wrap:anywhere}
.ta-font-meta{font-size:11px;color:var(--dim)}
.ta-font[aria-pressed=true]{border-color:var(--pink);box-shadow:inset 0 0 0 1px var(--pink);background:#16181D}
.ta-font.is-loading{opacity:.6}
.ta-font-note{min-height:20px;margin:0;font-size:12px;color:var(--ta-mute)}.ta-font-note.is-warn{color:var(--gold)}

/* 樣式 */
.ta-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.ta-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.ta-chip{flex:0 0 auto;min-height:44px;padding:8px 18px;border-radius:999px;border:1px solid var(--ta-line);background:transparent;color:var(--cream);font-size:15px;letter-spacing:.1em;white-space:nowrap}
.ta-chip:hover{border-color:var(--cream)}
.ta-chip[aria-pressed=true]{background:var(--pink);border-color:var(--pink);color:var(--night)}
.ta-chip[aria-expanded=true]{background:var(--cream);border-color:var(--cream);color:var(--night)}
.ta-panel{margin-top:6px;padding:14px;border:1px solid var(--nline);border-radius:10px;background:var(--deep);display:grid;gap:12px}
.ta-panel[hidden]{display:none}
.ta-swatches{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ta-swatch{width:44px;height:44px;border-radius:999px;border:2px solid var(--ta-line);background:var(--sw);padding:0}
.ta-swatch[aria-pressed=true]{border-color:var(--pink);box-shadow:0 0 0 2px var(--night),0 0 0 4px var(--pink)}
.ta-custom{display:flex;align-items:center;gap:8px;min-height:44px;font-size:14px;color:var(--ta-mute)}
.ta-custom input{width:44px;height:44px;border:1px solid var(--ta-line);border-radius:999px;background:none;padding:2px}
.ta-range{display:grid;grid-template-columns:3.2em 1fr 4.5em;gap:10px;align-items:center;font-size:14px;color:var(--ta-mute)}
.ta-range input{width:100%;min-height:44px;accent-color:var(--pink)}
.ta-range output{text-align:right;color:var(--cream);font-variant-numeric:tabular-nums}
.ta-check{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px}
.ta-check input,.ta-fs input{width:22px;height:22px;accent-color:var(--pink)}
.ta-seg{display:inline-flex;border:1px solid var(--ta-line);border-radius:999px;overflow:hidden}
.ta-seg button{min-height:44px;min-width:64px;padding:6px 14px;background:transparent;border:0;color:var(--cream);font-size:14px;letter-spacing:.08em}
.ta-seg button[aria-pressed=true]{background:var(--cream);color:var(--night)}
.ta-hint{margin:0;font-size:13px;color:var(--ta-mute);line-height:1.7}

/* 輸出 */
.ta-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 22px;border-radius:999px;border:1px solid var(--cream);background:transparent;color:var(--cream);font-size:15px;letter-spacing:.14em;text-decoration:none}
.ta-btn:hover{background:var(--cream);color:var(--night)}
.ta-btn:disabled{opacity:.4;pointer-events:none}
.ta-btn-main{width:100%;min-height:54px;border-color:var(--pink);background:var(--pink);color:var(--night);font-weight:500}
.ta-btn-main:hover{background:#ff6aa6;border-color:#ff6aa6;color:var(--night)}
.ta-btn-sm{min-height:44px;padding:6px 18px;font-size:14px}
.ta-export-main{display:flex;gap:10px;align-items:stretch}.ta-export-main .ta-btn-main{flex:1 1 auto;width:auto}.ta-seg-fmt{flex:0 0 auto}
.ta-export-sub{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.ta-after{display:grid;gap:8px;align-content:start}
.ta-status{min-height:24px;margin:0;font-size:13px;color:var(--cyan)}.ta-status.is-error{color:var(--pink-soft)}
.ta-invite{padding:14px 16px;border:1px dashed var(--jade);border-radius:10px;background:rgba(46,102,86,.18);font-size:14px}
.ta-invite p{margin:0 0 8px}.ta-invite-actions{display:flex;gap:12px;align-items:center}
.ta-toast{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;max-width:520px;margin-inline:auto;padding:14px 16px;border-radius:12px;background:var(--cream);color:var(--ink);box-shadow:0 8px 28px rgba(0,0,0,.45);display:grid;gap:10px;font-size:14px}
.ta-toast[hidden]{display:none}.ta-toast p{margin:0}.ta-toast div{display:flex;gap:12px;align-items:center}.ta-toast .ta-link{color:var(--jade)}
.ta-toast .ta-btn{border-color:var(--ink);color:var(--ink)}.ta-toast .ta-btn:hover{background:var(--ink);color:var(--cream)}

/* 對話框 */
.ta-dialog{width:min(94vw,520px);max-height:88dvh;overflow:auto;padding:20px;border:1px solid var(--ta-line);border-radius:14px;background:var(--night2);color:var(--cream)}
.ta-dialog::backdrop{background:rgba(0,0,0,.66)}
.ta-dlg-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.ta-dlg-head h2{font-size:20px;letter-spacing:.08em;margin:0}
.ta-dialog h3{font-size:16px;margin:14px 0 6px}
.ta-dialog p{margin:0 0 10px;color:var(--ta-mute);font-size:14px}
.ta-dlg-steps{list-style:decimal;padding-left:1.4em;display:grid;gap:8px;font-size:14px;color:var(--ta-mute)}.ta-dlg-steps strong{color:var(--cream)}
.ta-dlg-list{display:grid;gap:6px;font-size:14px}.ta-dlg-list li{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--nline);padding-top:6px}.ta-dlg-list span{color:var(--dim);font-size:12px;text-align:right}
.ta-dlg-block{border-top:1px solid var(--nline);margin-top:14px;padding-top:6px}
.ta-dlg-actions{display:flex;gap:10px;flex-wrap:wrap}
.ta-fs{border:0;padding:0;margin:0 0 10px;display:grid;gap:4px}.ta-fs legend{font-size:14px;color:var(--cream);margin-bottom:6px}.ta-fs label{display:flex;gap:10px;align-items:center;min-height:44px;font-size:14px;color:var(--ta-mute)}
.ta-save-preview{display:grid;place-items:center;padding:12px;margin-bottom:12px;border-radius:8px;background-color:var(--ck1);background-image:conic-gradient(var(--ck1) 25%,var(--ck2) 0 50%,var(--ck1) 0 75%,var(--ck2) 0);background-size:16px 16px}
.ta-save-preview img{max-width:100%;height:auto;max-height:46dvh;object-fit:contain}

/* ---------- 網頁模式：編輯器以外的內容 ---------- */
.tw-more{padding-bottom:clamp(48px,7vw,96px)}
.tw-install{display:flex;flex-wrap:wrap;gap:20px 48px;align-items:center;justify-content:space-between;margin-top:clamp(40px,6vw,72px);padding-block:28px;border-block:1px solid var(--nline)}
.tw-install>div:first-child{flex:1 1 360px}
.tw-lead{max-width:44em;color:var(--ta-mute);margin-top:10px}
.tw-install-act{flex:0 1 auto;display:grid;gap:8px;justify-items:start}
.tw-install-state{margin:0;font-size:13px;color:var(--cyan);min-height:20px}
.tw-sec{padding-top:clamp(48px,6vw,80px)}
.tw-sec h2{margin-top:10px}
.tw-steps{display:grid;gap:22px;margin-top:28px;grid-template-columns:repeat(2,minmax(0,1fr))}
.tw-steps li{display:flex;gap:18px;align-items:flex-start}
.tw-num{flex:0 0 auto;width:38px;height:38px;border-radius:999px;border:1px solid var(--pink);color:var(--pink-soft);display:grid;place-items:center;font-size:15px}
.tw-steps h3{font-size:19px;margin:0 0 4px}.tw-steps p{margin:0;color:var(--ta-mute);font-size:15px}
.tw-cards{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:28px}
.tw-cards article,.tw-hub-card{padding:24px;border:1px solid var(--nline);border-radius:6px;background:var(--night2)}
.tw-cards h3,.tw-hub-card h2{font-size:22px;margin:6px 0 8px}.tw-cards p{margin:0 0 10px;color:var(--ta-mute);font-size:15px}
.tw-tag{font-size:12px;letter-spacing:.2em;color:var(--pink-soft);margin:0}
.tw-prose{max-width:46em;display:grid;gap:14px;margin-top:14px;color:var(--ta-mute)}.tw-prose p{margin:0}
.tw-faq{margin-top:24px;max-width:50em}
.tw-faq details{border-top:1px solid var(--nline);padding:4px 0}.tw-faq details:last-child{border-bottom:1px solid var(--nline)}
.tw-faq summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-size:17px;letter-spacing:.04em}
.tw-faq p{margin:0 0 14px;color:var(--ta-mute)}
.tw-also{margin-top:28px;font-size:14px;color:var(--ta-mute)}
.tw-noscript{padding-block:16px;color:var(--gold)}
.tw-hub-grid{display:grid;gap:20px;grid-template-columns:repeat(2,minmax(0,1fr));padding-top:12px}
.tw-hub-card img{border-radius:14px;margin-bottom:8px}.tw-hub-card p{color:var(--ta-mute)}

/* ---------- 小螢幕 ---------- */
@media (max-width:860px){
  .ta-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"input" "phrases" "preview" "fonts" "styles" "export" "after"}
  .ta-preview{position:static}
  .ta-export{position:sticky;bottom:0;z-index:20;margin-inline:-14px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--night2) 78%,rgba(11,18,22,0))}
  .is-typing .ta-export{position:static;background:none}
  .is-typing .ta-toast{display:none}
  .ta-stage canvas{max-height:min(34vh,300px);max-height:min(34dvh,300px)}
  .tool-wa .ta-stage{max-height:min(34vh,280px);max-height:min(34dvh,280px);width:min(100%,280px)}
  .ta-note{text-align:left}
  .tw-steps{grid-template-columns:1fr}.tw-cards{grid-template-columns:1fr}.tw-hub-grid{grid-template-columns:1fr}
  .ta{padding:14px}
}
@media (max-width:380px){
  .tool-page .wrap{padding-inline:max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right))}
  .ta{padding:10px}.ta-export{margin-inline:-10px;padding-inline:10px}
  .ta-font{flex-basis:88px}.ta-chip{padding-inline:14px}
  .ta-input textarea{font-size:17px}
}
@media (min-width:861px){
  .ta-font-strip{flex-wrap:wrap;overflow:visible}
  .ta-font{flex:0 0 calc(25% - 8px)}
}
@media (prefers-reduced-motion:reduce){.tool-page *{transition:none!important;scroll-behavior:auto!important}}

/* ---------- 已安裝的 App 模式：精簡應用列＋編輯器；網站頁首頁尾、SEO 說明隱藏（頁面仍是同一頁、同一內容） ---------- */
@media (display-mode: standalone){
  .site-header,.site-footer,.tw-head,.tw-more,.skip{display:none!important}
  .tool-page .tw-wrap{padding:0}.tool-page .ta{border:0;border-radius:0;min-height:100dvh;padding:max(8px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-left)) 0 max(14px,env(safe-area-inset-right))}
  .ta-bar-title{display:flex}.ta-bar{position:static}
  .ta-export{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
}
html.is-app .site-header,html.is-app .site-footer,html.is-app .tw-head,html.is-app .tw-more,html.is-app .skip{display:none!important}
html.is-app .tool-page .tw-wrap{padding:0}
html.is-app .tool-page .ta{border:0;border-radius:0;min-height:100dvh;padding:max(8px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-left)) 0 max(14px,env(safe-area-inset-right))}
html.is-app .ta-bar-title{display:flex}
html.is-app .ta-export{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
html.is-app body,html.is-app .tool-page{background:var(--night2)}

/* hidden 屬性必須勝過元件的 display 設定 */
.ta [hidden],.ta-dlg [hidden],dialog [hidden],.tw-install [hidden],.ta-toast[hidden],.ta-invite[hidden]{display:none!important}

/* 網站預設「深色頁面」的 main 是淺紙色；工具頁整頁都是深色 */
body.theme-dark main.tool-page{background:var(--night);color:var(--cream)}
.ta-stage[data-bg=chat]{background:#EFEAE2}.ta-dot-chat{background:#EFEAE2}