:root {
  --site-bg: #f7f9fc;
  --surface: #ffffff;
  --surface-soft: #f2f5f9;
  --text: #172033;
  --text-muted: #66758a;
  --border: #dfe6ee;
  --brand: #1f5fc4;
  --brand-strong: #174a9d;
  --accent: #e11d48;
  --focus: rgba(31, 95, 196, .28);
  --shadow-sm: 0 4px 14px rgba(20, 40, 70, .06);
  --shadow-md: 0 12px 30px rgba(20, 40, 70, .10);
  --radius-sm: 9px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}

html { min-height: 100%; overflow-x: clip; background: var(--site-bg); }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
  background: var(--site-bg);
  color: var(--text);
  font-family: "Noto Sans TC", "Noto Sans", Arial, sans-serif;
}
img, video { max-width: 100%; height: auto; }
main { flex: 1 0 auto; width: 100%; background: var(--site-bg); }
.main-container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 32px 24px; box-sizing: border-box; }

.site-header {
  position: relative;
  z-index: 20;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(40px + env(safe-area-inset-right)) 0 calc(40px + env(safe-area-inset-left));
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.site-header.is-sticky { position: sticky; top: 0; }
.site-brand { min-width: 0; display: flex; align-items: center; color: inherit; text-decoration: none; perspective: 800px; }
.site-logo { width: auto !important; height: 80px !important; margin-right: 14px; aspect-ratio: 1280 / 529; object-fit: contain; transform-origin: center; backface-visibility: hidden; animation: site-logo-tilt 8s ease-in-out infinite; }
.site-brand-title { color: #174cb4; font-size: 26px; font-weight: 700; letter-spacing: 2px; white-space: nowrap; }
.site-header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.site-nav { display: flex; align-items: center; }
.site-nav a { position: relative; margin: 0 16px; color: #174cb4; font-size: 18px; font-weight: 600; text-decoration: none; }
.site-nav a::after { content: ""; position: absolute; right: 0; bottom: -5px; left: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: center; transition: transform .22s ease; }
.site-nav a:hover::after, .site-nav a:focus-visible::after, .site-nav a.active::after { transform: scaleX(1); }
.site-language-switch { height: 42px; margin-left: 14px; display: inline-flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: #f8fafc; color: #617086; box-shadow: 0 2px 8px rgba(24, 50, 84, .05); }
.site-language-icon { flex: 0 0 auto; margin: 0 4px 0 3px; color: var(--brand); }
.site-nav .site-language-switch a { min-width: 42px; margin: 0; padding: 7px 9px; border-radius: 8px; color: #526176; font-size: 13px; font-weight: 750; line-height: 1; text-align: center; text-decoration: none; transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.site-nav .site-language-switch a::after { display: none; }
.site-nav .site-language-switch a:hover { background: #eaf1fb; color: var(--brand-strong); }
.site-nav .site-language-switch a.is-current { background: var(--brand); color: #fff; box-shadow: 0 3px 8px rgba(31, 95, 196, .24); }
.site-language-divider { width: 1px; height: 18px; background: #d8e0ea; }
.site-nav-toggle { display: none; padding: 10px; border: 0; border-radius: 10px; background: transparent; color: #174cb4; cursor: pointer; line-height: 0; }
.site-nav-backdrop { position: fixed; inset: 0; z-index: 18; background: rgba(10, 24, 45, .34); }

.site-footer { flex: 0 0 auto; min-height: 52px; display: flex; align-items: center; justify-content: center; padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left); background: #101928; color: #fff; font-size: 15px; text-align: center; }
.site-footer p { margin: 12px 16px; }

.site-breadcrumb { margin: 18px 0; }
.site-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0; padding: 0; list-style: none; }
.site-breadcrumb li { display: inline-flex; align-items: center; color: var(--text-muted); font-size: 13px; }
.site-breadcrumb li + li::before { content: "/"; margin-right: 7px; color: #9aa7b7; }
.site-breadcrumb a { color: var(--brand); text-decoration: none; }
.site-breadcrumb a:hover { text-decoration: underline; }
.site-breadcrumb [aria-current="page"] { color: var(--text); font-weight: 650; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 1px solid transparent; border-radius: 999px; background: var(--brand); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--brand-strong); }
:where(a, button, select, input, textarea):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.spec-text, .specs, .muted, .card, .section-title { overflow-wrap: anywhere; word-break: break-word; }

@keyframes site-logo-tilt {
  0%, 50%, 100% { transform: rotateY(0deg); }
  25% { transform: rotateY(90deg); }
  75% { transform: rotateY(-80deg); }
}

@supports (min-height: 100dvh) { body { min-height: 100dvh; } }

@media (max-width: 900px) {
  .main-container { padding: 0 8px 16px; }
  .site-header { min-height: 60px; padding-right: calc(8px + env(safe-area-inset-right)); padding-left: calc(8px + env(safe-area-inset-left)); }
  .site-logo { height: 40px !important; margin-right: 8px; }
  .site-brand-title { max-width: 53vw; overflow: hidden; font-size: 18px; letter-spacing: 1px; text-overflow: ellipsis; white-space: nowrap; }
  .site-nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .site-nav { position: fixed; top: 60px; right: 0; left: 0; z-index: 19; display: none; flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 16px 14px; background: var(--surface); box-shadow: var(--shadow-md); }
  .site-nav a { display: block; margin: 0; padding: 11px 10px; border-radius: 10px; font-size: 15px; }
  .site-nav a::after { display: none; }
  .site-nav a:hover, .site-nav a.active { background: rgba(31, 95, 196, .08); }
  .site-language-switch { width: 100%; height: 46px; box-sizing: border-box; justify-content: center; margin: 6px 0 0; }
  .site-nav .site-language-switch a { flex: 1; max-width: 120px; padding: 9px 12px; }
  body.nav-open { overflow: hidden; }
  body.nav-open .site-nav { display: flex; }
  .site-footer { min-height: 44px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}