/* The source viewer stays intact; these styles only add language controls and translated plan labels. */
.language-switch {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-family: var(--f-ui);
  line-height: 1;
}
.language-switch a {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 27px;
  padding: 0 5px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
}
.language-switch a:hover,
.language-switch a:focus-visible { background: var(--hover); color: var(--ink); }
html[lang="zh-Hant"] .language-switch [data-locale="zh"],
html[lang="en"] .language-switch [data-locale="en"] {
  color: #fff;
  background: var(--ink);
}
html[lang="en"] .rrow-name .latin,
html[lang="en"] .fgroup-head .latin,
html[lang="en"] .rgroup-title .latin,
html[lang="en"] .stat-cap .latin,
html[lang="en"] .counter-cap .latin,
html[lang="en"] .rooms-head .latin { display: none; }
html[lang="en"] .brand-name { letter-spacing: .02em; }
html[lang="en"] .ov-sub { max-width: 240px; line-height: 1.45; }
.chips .chip-key b { margin-left: .32em; }
.chips .chip b + small { margin-left: .2em; }
.plan-frame { position: relative; }
.localized-plan-labels { position: absolute; inset: 0; pointer-events: none; }
.localized-plan-label {
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -50%);
  max-width: 92px;
  padding: 2px 4px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(0,0,0,.1);
  color: #141414;
  font-family: var(--f-ui);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  box-shadow: 0 1px 2px rgba(0,0,0,.07);
}
@media (max-width: 719.98px), (max-height: 500px) and (orientation: landscape) {
  .topbar { gap: 3px; }
  .topbar-actions { gap: 3px; }
  .language-switch a { min-width: 25px; height: 26px; padding: 0 3px; font-size: 10px; }
  html[lang="en"] .brand-name { font-size: 14px; }
  .localized-plan-label { font-size: 8px; padding: 1px 2px; }
}
@media (max-width: 390px) {
  .topbar { padding-left: 9px; padding-right: 5px; }
  .brand-name { font-size: 15px; }
  .seg-mode .seg-btn { padding: 0 5px; gap: 5px; }
  .seg-mode .seg-btn::after { left: 5px; right: 5px; }
}