/* v1.1.1 translation-page visual baseline; all rules are isolated to /translate. */
.publicTranslationPage { background: #f8fcfc; }
.publicTranslationPage .publicPageMain { min-height: calc(100vh - 76px); }
.publicTranslationPage .publicTranslationSection { padding: 64px max(4vw, 24px) 76px; text-align: center; background: linear-gradient(#f8fcfc, #eaf8f6); }
.publicTranslationPage .publicIntro { max-width: 860px; margin: 0 auto; }
.publicTranslationPage .publicIntro .eyebrow { margin-bottom: 10px; }
.publicTranslationPage .publicIntro h1 { margin: 0; font-size: clamp(42px, 6.1vw, 76px); line-height: 1.12; letter-spacing: -1.8px; }
.publicTranslationPage .publicIntro h1 span { color: var(--p); }
.publicTranslationPage .translationMeta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0 0; }
.publicTranslationPage .translationMeta > p { margin: 0; color: var(--gray); font-size: clamp(15px, 2vw, 21px); line-height: 1.55; }
.publicTranslationPage #translationTrust { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px; padding: 9px 13px; border: 1px solid #bfe2de; border-radius: 10px; background: var(--light); }
.publicTranslationPage .trustBadge { display: inline-flex; align-items: center; gap: 7px; color: #176d67; font-size: 14px; font-weight:700; white-space: nowrap; }
.publicTranslationPage .trustBadgeIcon { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid #0d7c74; border-radius: 50%; background: #fff; color: #0d7c74; font-family:var(--font-body);font-size:13px;font-weight:700; }
.publicTranslationPage .translator { max-width: 1040px; margin: 40px auto 0; overflow: hidden; border: 1px solid #e2f0ef; border-radius: 22px; background: #fff; box-shadow: var(--shadow); text-align: start; }
.publicTranslationPage .lang { display: grid; height: 65px; grid-template-columns: 1fr 75px 1fr; border-bottom: 1px solid #e7eeee; }
.publicTranslationPage .lang .languageStatus { display: flex; align-items: center; padding: 0 27px; color: var(--text); font-size: 18px; font-weight: 700; }
.publicTranslationPage .lang .languageStatus:last-child { justify-content: end; text-align: end; }
.publicTranslationPage .lang #swap { place-self: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--light); color: var(--p); font-size: 26px; cursor: pointer; transition: .25s; }
.publicTranslationPage .lang #swap:hover { background: var(--p); color: #fff; transform: rotate(180deg); }
.publicTranslationPage .translationControls { display: none; }
.publicTranslationPage .panels { display: grid; grid-template-columns: 1fr 1fr; }
.publicTranslationPage .panel { display: flex; min-height: 280px; min-width: 0; padding: 23px 27px; flex-direction: column; }
.publicTranslationPage .panel:first-child { border-right: 1px solid #e7eeee; }
.publicTranslationPage .panel label, .publicTranslationPage .translationHeader { color: var(--gray); font-size: 16px; font-weight: 700; }
.publicTranslationPage .panel textarea { width: 100%; min-height: 170px; flex: 1; padding: 17px 0; border: 0; outline: 0; resize: none; color: var(--text); font-size: clamp(23px, 2.6vw, 34px); }
.publicTranslationPage #result { min-height: 132px; flex: 1; padding: 16px 0; color: var(--text); font-family:var(--font-zh);font-size:clamp(23px,2.6vw,34px); white-space: pre-wrap; }
.publicTranslationPage #result span { color: #a5afaf; }
.publicTranslationPage .panel footer { display: flex; align-items: center; justify-content: space-between; color: #9aa3a3; font-size: 15px; }
.publicTranslationPage .panel footer button { border: 0; background: transparent; color: var(--gray); cursor: pointer; }
.publicTranslationPage .translationHeader > span { display: inline-flex; align-items: center; }
.publicTranslationPage .translationHeader i { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--p); box-shadow: 0 0 0 5px var(--light); }
.publicTranslationPage .directionStatus, .publicTranslationPage .translationSlowNotice { margin: 10px 0; color: var(--gray); font-size: 14px; }
.publicTranslationPage .translateActions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #dcebea; }
.publicTranslationPage .translateActions button, .publicTranslationPage .translateActions a { min-width: 0; padding: 8px 10px; border: 1px solid #cde5e2; border-radius: 8px; background: var(--light); color: #176d67; font-size: 13px; font-weight:700; text-align: center; }
.publicTranslationPage .translationFeedback { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; }
.publicTranslationPage .translationFeedback button { border: 1px solid #d6e7e5; border-radius: 8px; background: #fff; color: var(--gray); padding: 7px 10px; font-size: 13px; font-weight: 700; cursor: pointer; }
.publicTranslationPage .translationFeedback button:hover, .publicTranslationPage .translationFeedback button.selected { border-color: var(--p); background: var(--light); color: var(--p); }
.publicTranslationPage .humanUpsell { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; color: var(--gray); font-size: 13px; }
.publicTranslationPage .humanUpsell a { color: var(--p); font-weight:700; }
.publicTranslationPage .phraseTemplates, .publicTranslationPage .recentTranslations { padding: 14px 27px; border-top: 1px solid #edf2f1; background: #fff; }
.publicTranslationPage .templateTitle, .publicTranslationPage .recentTitle { margin-bottom: 9px; color: var(--text); font-size: 15px; font-weight:700; }
.publicTranslationPage .templateChips, .publicTranslationPage .recentList { display: flex; flex-wrap: wrap; gap: 8px; }
.publicTranslationPage .templateChips button, .publicTranslationPage .recentList button { border: 1px solid #cde5e2; border-radius: 999px; background: var(--light); color: #176d67; padding: 7px 12px; font-size: 14px; font-weight: 700; cursor: pointer; }
.publicTranslationPage .privacy { display: flex; align-items: center; gap: 12px; padding: 15px 27px; border-top: 1px solid #edf2f1; background: #fbfdfd; }
.publicTranslationPage .privacy p { margin: 0; color: var(--gray); font-size: 15px; line-height: 1.5; }
@media (max-width: 760px) { .publicTranslationPage .publicTranslationSection { padding: 42px 16px 56px; } .publicTranslationPage .translator { margin-top: 28px; border-radius: 18px; } .publicTranslationPage .panels { grid-template-columns: 1fr; } .publicTranslationPage .panel { min-height: 220px; padding: 20px 18px; } .publicTranslationPage .panel:first-child { border-right: 0; border-bottom: 1px solid #e7eeee; } .publicTranslationPage .lang { height: auto; min-height: 58px; grid-template-columns: 1fr 52px 1fr; } .publicTranslationPage .lang .languageStatus { padding: 10px 14px; font-size: 14px; } .publicTranslationPage .translateActions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .publicTranslationPage .humanUpsell { flex-wrap: wrap; } .publicTranslationPage .phraseTemplates, .publicTranslationPage .recentTranslations, .publicTranslationPage .privacy { padding: 13px 18px; } }

/* Translation completion actions and privacy notice (2026-08-18h). */
.publicTranslationPage .translationFeedback { align-items: center; }
.publicTranslationPage .translationFeedback #humanReview { display:inline-flex; align-items:center; justify-content:center; border:1px solid #d6e7e5; border-radius:8px; background:#fff; color:var(--gray); padding:7px 10px; font-size:13px; font-weight:700; }
.publicTranslationPage .translationFeedback #humanReview:hover, .publicTranslationPage .translationFeedback #humanReview:focus-visible, .publicTranslationPage .translationFeedback #humanReview.selected { border-color:var(--p); background:var(--light); color:var(--p); }
.publicTranslationPage .translationFeedback #humanReview:disabled { cursor:default; opacity:.78; }
.publicTranslationPage .humanUpsell > span{color:#c7362f;font-weight:700}
.publicTranslationPage .privacy { align-items:flex-start; flex-wrap:nowrap; }
.publicTranslationPage .privacyLock { flex:0 0 auto; line-height:1.5; }
.publicTranslationPage .privacy p { min-width:0; flex:1; }
.publicTranslationPage .privacyLink { display:inline-flex; align-items:center; margin-left:7px; padding:2px 8px; border:1px solid #bfe2de; border-radius:999px; color:#087d74; font-size:13px; font-weight:700; line-height:1.35; white-space:nowrap; }
.publicTranslationPage .privacyLink:hover, .publicTranslationPage .privacyLink:focus-visible { border-color:#087d74; background:var(--light); }

@media (min-width:761px){.publicTranslationPage .translator{width:min(1040px,100%);margin:40px auto 0}.publicTranslationPage .translationFeedback #humanReview{margin-left:auto}.publicTranslationPage .privacy p{display:flex;align-items:center;gap:10px}.publicTranslationPage .privacyLink{margin-left:auto}}




.translationNextAction{display:flex;gap:18px;align-items:center;justify-content:space-between;margin-top:14px;padding:14px 16px;border:1px solid #b9ded9;border-radius:14px;background:#f3fbfa}.translationNextAction[hidden],.translationFeedbackRecovery[hidden]{display:none}.translationNextAction span{display:grid;gap:2px}.translationNextAction small{color:#687386;font-size:12px;font-weight:700}.translationNextAction strong{color:#173b39;font-size:15px;line-height:1.45}.translationNextAction a{display:inline-flex;min-height:44px;align-items:center;padding:9px 14px;border-radius:10px;color:#fff;background:#087D74;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}.translationFeedbackRecovery{margin-top:14px;padding:14px 16px;border:1px solid #d7e2e1;border-radius:14px;background:#f8fbfb}.translationFeedbackRecovery>strong{display:block;margin-bottom:10px;color:#173b39;font-size:14px}.translationFeedbackRecovery>div{display:flex;flex-wrap:wrap;gap:8px}.translationFeedbackRecovery button{min-height:40px;padding:7px 12px;border:1px solid #b7cbc9;border-radius:999px;color:#315653;background:#fff;font:inherit;font-size:13px}.translationFeedbackRecovery button.selected{border-color:#087D74;color:#fff;background:#087D74}@media(max-width:620px){.translationNextAction{display:grid}.translationNextAction a{justify-content:center;white-space:normal;text-align:center}}

/* Thai voice preference for Chinese-to-Thai translation. */
.publicTranslationPage .thaiVoiceControl{display:flex;justify-content:flex-end;padding:8px 27px 0;background:#fff}
.publicTranslationPage .thaiVoiceSetting{min-height:44px;padding:8px 12px;border:1px solid #bfe2de;border-radius:999px;background:var(--light);color:#176d67;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.publicTranslationPage .thaiVoiceSetting[hidden]{display:none}
.publicTranslationPage .thaiVoiceSetting:hover{border-color:var(--p);color:var(--p)}
.publicTranslationPage .thaiVoiceSetting:focus-visible,.thaiVoiceDialog button:focus-visible{outline:3px solid rgba(8,125,116,.28);outline-offset:2px}
.thaiVoiceDialog{width:min(620px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:0;overflow:auto;border:1px solid #b9ded9;border-radius:20px;background:#fff;color:var(--text);font:inherit;box-shadow:0 24px 70px rgba(23,59,57,.25)}
.thaiVoiceDialog::backdrop{background:rgba(20,48,46,.48);backdrop-filter:blur(2px)}
.thaiVoiceDialog form{display:grid;gap:16px;padding:26px}
.thaiVoiceDialog h2{margin:0;color:var(--text);font-family:var(--font-heading);font-size:clamp(24px,4vw,32px);line-height:1.25}
.thaiVoiceDialog p{margin:0;color:var(--gray);font-size:15px;line-height:1.65}
.thaiVoiceChoices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.thaiVoiceDialog button{min-height:44px;padding:10px 12px;border:1px solid #bfe2de;border-radius:12px;background:#f3fbfa;color:#173b39;font:inherit;font-size:14px;font-weight:700;line-height:1.45;cursor:pointer}
.thaiVoiceDialog [data-thai-voice]:hover{border-color:var(--p);background:#e5f6f3;color:#087d74}
.thaiVoiceDialog .thaiVoiceCancel{justify-self:end;border-color:transparent;background:transparent;color:var(--gray)}
@media(max-width:620px){.publicTranslationPage .thaiVoiceControl{padding:8px 14px 0}.publicTranslationPage .thaiVoiceSetting{width:100%}.thaiVoiceDialog form{padding:22px 18px}.thaiVoiceChoices{grid-template-columns:1fr}.thaiVoiceDialog .thaiVoiceCancel{width:100%;justify-self:stretch}}