:root {
  --bayin-ink: #10223d;
  --bayin-muted: #6c7890;
  --bayin-blue: #2563eb;
  --bayin-line: #e7edf5;
  --bayin-bg: #f7f9fc;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bayin-bg); color: var(--bayin-ink); font-family: "Open Sans", Arial, sans-serif; }
a { color: inherit; }
.bayin-detail-nav { background: #fff; border-bottom: 1px solid var(--bayin-line); position: sticky; top: 0; z-index: 10; }
.bayin-detail-nav-inner { align-items: center; display: flex; justify-content: space-between; margin: 0 auto; max-width: 1160px; padding: 18px 24px; }
.bayin-detail-logo { display: inline-flex; align-items: center; text-decoration: none; }
.bayin-detail-logo img { display: block; height: 34px; max-width: 180px; object-fit: contain; }
.bayin-back { color: var(--bayin-muted); font-size: 14px; text-decoration: none; transition: color .2s ease; }
.bayin-back:hover { color: var(--bayin-blue); }
.bayin-detail-switch { display: inline-flex; position: relative; width: 154px; height: 32px; }
.bayin-detail-switch input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.bayin-detail-slider { align-items: center; background: #eef3fa; border: 1px solid #dfe7f3; border-radius: 999px; display: flex; height: 32px; justify-content: space-around; padding: 2px; position: relative; width: 100%; }
.bayin-detail-option { color: var(--bayin-muted); flex: 1; font-size: 11px; line-height: 26px; position: relative; text-align: center; z-index: 1; }
.bayin-detail-thumb { background: #fff; border-radius: 999px; box-shadow: 0 2px 8px rgba(35, 68, 112, .18); height: 26px; left: 2px; position: absolute; top: 2px; transition: transform .2s ease; width: calc((100% - 4px) / 3); }
.bayin-detail-switch[data-language="zh-tw"] .bayin-detail-thumb { transform: translateX(100%); }
.bayin-detail-switch[data-language="en"] .bayin-detail-thumb { transform: translateX(200%); }
.bayin-detail-switch[data-language="zh"] .bayin-detail-option-zh,
.bayin-detail-switch[data-language="zh-tw"] .bayin-detail-option-zh-tw,
.bayin-detail-switch[data-language="en"] .bayin-detail-option-en { color: var(--bayin-ink); font-weight: 700; }
.bayin-detail-main { margin: 0 auto; max-width: 1160px; padding: 72px 24px 96px; }
.bayin-detail-eyebrow { color: var(--bayin-blue); font-size: 12px; font-weight: 700; letter-spacing: .18em; margin: 0 0 16px; text-transform: uppercase; }
.bayin-detail-title { font-size: clamp(34px, 5vw, 64px); line-height: 1.1; margin: 0; max-width: 900px; }
.bayin-detail-meta { color: var(--bayin-muted); display: flex; flex-wrap: wrap; font-size: 14px; gap: 18px; margin-top: 22px; }
.bayin-detail-grid { align-items: start; display: grid; gap: 56px; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); margin-top: 52px; }
.bayin-detail-cover { background: #e9eff7; border-radius: 18px; box-shadow: 0 18px 50px rgba(22, 45, 82, .12); display: block; min-height: 300px; object-fit: cover; width: 100%; }
.bayin-detail-copy { color: #3d4d67; font-size: 18px; line-height: 1.9; white-space: pre-line; }
.bayin-detail-label { color: var(--bayin-ink); font-size: 13px; font-weight: 700; letter-spacing: .12em; margin-bottom: 14px; text-transform: uppercase; }
.bayin-detail-cta { background: var(--bayin-blue); border-radius: 999px; color: #fff; display: inline-flex; font-size: 14px; font-weight: 700; margin-top: 24px; padding: 14px 24px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.bayin-detail-cta:hover { box-shadow: 0 10px 26px rgba(37, 99, 235, .25); color: #fff; transform: translateY(-2px); }
.bayin-detail-error { color: #b42318; font-size: 18px; padding: 40px 0; }
.bayin-detail-footer { border-top: 1px solid var(--bayin-line); color: var(--bayin-muted); font-size: 13px; padding: 24px; text-align: center; }
@media (max-width: 760px) {
  .bayin-detail-nav-inner { gap: 12px; padding: 14px 16px; }
  .bayin-detail-logo img { height: 28px; max-width: 140px; }
  .bayin-back { font-size: 12px; }
  .bayin-detail-switch { width: 132px; }
  .bayin-detail-main { padding: 48px 18px 64px; }
  .bayin-detail-grid { display: flex; flex-direction: column; gap: 30px; margin-top: 34px; }
  .bayin-detail-copy { font-size: 16px; }
}