/* ==========================================================================
   Components — sliced from Figma "component" frame (node 471:1173)
   Depends on tokens.css (load tokens.css first).
   ========================================================================== */

/* ==========================================================================
   Button  (Figma node 417:245)
   Variants: primary · secondary · text · text_secondary · social/default
             · icon_button · icon_button_outline
   Sizes:    large (lg) · medium (md)
   States:   default · hover/pressed  (use :hover, or data-state="hover" to
             force the pressed look in showcases)
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-zh);
  cursor: pointer;
  border: none;
  background: none;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:disabled,
.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* ---- Sizes ---------------------------------------------------------------- */
.btn--lg { font-size: var(--body-size); line-height: var(--body-lh); padding: 12px; border-radius: 8px; }
.btn--md { font-size: var(--caption-size); line-height: var(--caption-lh); padding: 8px 12px; border-radius: 5px; }

/* ---- Full-width modifier -------------------------------------------------- */
.btn--block { width: 100%; }

/* ---- Primary (filled green) ---------------------------------------------- */
.btn--primary { background: var(--primary-300); color: #fff; font-weight: var(--fw-medium); }
.btn--primary:hover,
.btn--primary[data-state="hover"] { background: var(--primary-200); box-shadow: 0 4px 2px rgba(0, 0, 0, .15); }

/* ---- Secondary (outlined) ------------------------------------------------ */
.btn--secondary { background: var(--neutral-100); border: 1px solid var(--neutral-400); color: var(--neutral-700); font-weight: var(--fw-medium); }
/* hover REDESIGNED 2026-07-22 (Figma 646:2598/646:2599) — was a gray wash
   (#ECEEED bg + #888887 text); is now a pale-green brand tint. */
.btn--secondary:hover,
.btn--secondary[data-state="hover"] { background: var(--background-brand-light); border-color: var(--border-default); color: var(--text-brand); }

/* ---- Text (link-style, green underline) --------------------------------- */
.btn--text { color: var(--primary-300); font-weight: var(--fw-bold); text-decoration: underline; text-underline-position: from-font; padding: 8px 4px; }
.btn--text.btn--md { padding: 4px; }
.btn--text:hover,
.btn--text[data-state="hover"] { color: var(--primary-200); }

/* ---- Text secondary (gray underline) ------------------------------------ */
.btn--text-secondary { color: var(--neutral-500); font-weight: var(--fw-bold); text-decoration: underline; text-underline-position: from-font; padding: 8px 4px; }
.btn--text-secondary.btn--md { padding: 4px; }

/* ---- Social / Default-with-icon (white card, icon + label) --------------- */
.btn--social { background: var(--neutral-100); border: 1px solid var(--neutral-400); color: var(--neutral-700); font-weight: var(--fw-medium); font-size: var(--caption-size); line-height: var(--caption-lh); border-radius: 5px; gap: 4px; padding: 12px; }
/* hover — Figma 780:3649 (new this sync) */
.btn--social:hover,
.btn--social[data-state="hover"] { background: var(--surface-interactive-hover); }

/* ---- Icon button (filled square) ---------------------------------------- */
.btn--icon { background: var(--neutral-700); color: #fff; border-radius: 5px; width: 24px; height: 24px; padding: 0; }
.btn--icon:hover,
.btn--icon[data-state="hover"] { background: var(--neutral-600); }

/* ---- Icon button outline (square) --------------------------------------- */
.btn--icon-outline { color: var(--neutral-700); border: 1px solid var(--neutral-400); border-radius: 5px; width: 38px; height: 38px; padding: 10px; }
.btn--icon-outline:hover,
.btn--icon-outline[data-state="hover"] { background: var(--neutral-300); }

/* ---- Ghost icon button (36px, no fill, no border) ------------------------
   Figma style=default, with_icon=yes, Size=large, icon_location=no
   default 646:2684 · hover 646:2688 · pressed 772:3944
   Used for the dark-mode / utility toggles in the reading pages. ---------- */
.btn--icon-ghost {
  width: 36px; height: 36px;
  padding: 10px;
  gap: 10px;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--icon-primary);
}
.btn--icon-ghost:hover,
.btn--icon-ghost[data-state="hover"] { background: var(--surface-interactive-hover); }
.btn--icon-ghost:active,
.btn--icon-ghost[data-state="pressed"] { background: var(--background-brand-light); }
.btn--icon-ghost .btn__icon { width: 20px; height: 20px; }

/* ---- Text / text-secondary WITH an icon ---------------------------------
   Figma style=text_secondary, with_icon=yes, Size=large
     icon_location=front 527:1985 · icon_location=after 646:2565
   Front vs. after is markup order — put .btn__icon before or after the label.
   Note this variant is Medium weight and has NO underline, unlike the
   plain text_secondary button. ------------------------------------------- */
.btn--with-icon {
  gap: 4px;
  padding: 4px;
  font-size: var(--body-size);
  line-height: var(--body-lh);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.btn--with-icon .btn__icon { width: 20px; height: 20px; }

/* ---- Icon slot inside buttons ------------------------------------------- */
.btn__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.btn--social .btn__icon { width: 24px; height: 24px; }
.btn--icon .btn__icon { width: 16px; height: 16px; }
.btn--icon-outline .btn__icon { width: 20px; height: 20px; }
.btn__icon svg,
.btn__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ==========================================================================
   Input Field  (Figma node 430:398)
   States: default · focus · error · disabled  (focus uses real :focus-within)
   Optional: trailing eye toggle (passwords) · helper description
   Force a state in showcases with .field--focus / --error / --disabled.
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: 8px; align-items: stretch; width: 100%; }

.field__label { font-family: var(--font-zh); font-weight: var(--fw-medium); font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--neutral-700); }

.field__control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
  width: 100%;
  box-sizing: border-box;
  background: var(--neutral-100);
  border: 1px solid var(--neutral-400);
  border-radius: 8px;
  padding: 12px 16px;
}
.field__control:focus-within,
.field--focus .field__control { border-color: var(--primary-300); }

.field__input {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-zh);
  font-weight: var(--fw-medium);
  font-size: var(--caption-size);
  line-height: var(--caption-lh);
  color: var(--neutral-700);
}
.field__input::placeholder { color: var(--neutral-500); }

/* trailing eye / icon toggle */
.field__eye {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  padding: 0; border: none; background: none; cursor: pointer;
  color: var(--neutral-500);
}
.field__eye svg { width: 100%; height: 100%; display: block; }

/* helper description */
.field__desc { font-family: var(--font-zh); font-weight: var(--fw-medium); font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--neutral-500); }

/* error */
.field--error .field__control { border-color: var(--error-01); }
.field__error { display: none; align-items: center; gap: 2px; color: var(--error-01); font-family: var(--font-zh); font-weight: var(--fw-medium); font-size: var(--caption-size); line-height: var(--caption-lh); }
.field--error .field__error { display: flex; }
.field__error-icon { flex: none; width: 14px; height: 14px; display: inline-flex; }
.field__error-icon svg { width: 100%; height: 100%; display: block; }

/* disabled */
.field--disabled .field__label { color: var(--neutral-500); }
.field--disabled .field__control { background: var(--neutral-300); border-color: var(--neutral-400); }
.field--disabled .field__input { color: var(--neutral-500); }
.field--disabled .field__desc { color: var(--neutral-400); }

/* ==========================================================================
   Field size — large  (Select 449:395 / large label 449:396)
   Medium is the default above (14px label + 14px value). Large steps both to
   16px/1.6 and drops the fixed 40px control height.
   ========================================================================== */

.field--lg .field__label,
.field--lg .field__input,
.field--lg .field__select,
.field--lg .field__textarea { font-size: var(--body-size); line-height: var(--body-lh); }

/* ==========================================================================
   Select Field  (Figma 430:440)
   Reuses .field / .field__label / .field__desc / .field__error and the
   --error / --disabled modifiers. A real <select> is used so the prototype is
   actually operable; the native arrow is suppressed for the design's caret.
   ========================================================================== */

/* Right padding is 12 (not 16) to sit the caret correctly — Figma pl-16 pr-12.
   NOTE(designer): the medium node (430:444) carries BOTH h-[40px] and py-12,
   which cannot both hold — 12 + 24 line box + 12 + 2 border = 50px. The fixed
   40px is what actually renders in Figma, so that wins here and the vertical
   padding is dropped in favour of centring. Raised as QA item 16. */
.field__control--select { height: 40px; padding: 0 12px 0 16px; align-items: center; }

/* large has no height constraint in Figma — py-12 applies normally */
.field--lg .field__control--select { height: auto; padding: 12px 12px 12px 16px; }

.field__select {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: var(--font-zh);
  font-weight: var(--fw-medium);
  font-size: var(--caption-size);
  line-height: var(--caption-lh);
  color: var(--text-primary);
}
/* placeholder state — the design greys the value out until something is chosen */
.field__select:invalid,
.field--placeholder .field__select { color: var(--text-tertiary); }

.field__caret { flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; pointer-events: none; }
.field__caret img,
.field__caret svg { width: 100%; height: 100%; object-fit: contain; display: block; }

.field--disabled .field__select { color: var(--text-disabled); cursor: not-allowed; }
.field--disabled .field__caret { opacity: .5; }

/* ==========================================================================
   Textarea Field  (Figma 430:530)
   Same wrapper as the other fields; the control grows from 80px and keeps the
   native resize grip (the design draws one in the bottom-right corner).
   ========================================================================== */

.field__control--textarea {
  align-items: flex-start;
  min-height: 80px;
  padding: 8px 16px 12px;   /* Figma pt-8 px-16 pb-12 */
}

.field__textarea {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  resize: vertical;
  min-height: 60px;
  font-family: var(--font-zh);
  font-weight: var(--fw-medium);
  font-size: var(--caption-size);
  line-height: var(--caption-lh);
  color: var(--text-primary);
}
.field__textarea::placeholder { color: var(--text-tertiary); }
.field--disabled .field__textarea { color: var(--text-disabled); resize: none; }

/* ==========================================================================
   Checkbox  (Figma node 432:734)
   unchecked = white + gray border · checked = green + check
   indeterminate = green + minus  (Figma "disable" variant)
   ========================================================================== */

.checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.checkbox__input { position: absolute; width: 0; height: 0; opacity: 0; }

.checkbox__box {
  flex: none;
  box-sizing: border-box;
  width: 20px; height: 20px;
  border-radius: 4px;
  background: var(--neutral-100);
  border: 1px solid var(--neutral-400);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.checkbox__box svg { width: 16px; height: 16px; display: none; }

.checkbox__input:checked + .checkbox__box,
.checkbox__input:indeterminate + .checkbox__box { background: var(--primary-300); border-color: var(--primary-300); }
.checkbox__input:checked + .checkbox__box .checkbox__check { display: block; }
.checkbox__input:indeterminate + .checkbox__box .checkbox__minus { display: block; }
.checkbox__input:indeterminate + .checkbox__box .checkbox__check { display: none; }

.checkbox__input:focus-visible + .checkbox__box { outline: 2px solid var(--primary-200); outline-offset: 2px; }

.checkbox__input:disabled + .checkbox__box { opacity: .5; }
.checkbox:has(.checkbox__input:disabled) { cursor: not-allowed; }

.checkbox__label { font-family: var(--font-zh); font-weight: var(--fw-medium); font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--neutral-700); }

/* ==========================================================================
   Switch  (Figma 774:2706)
   51x30 track, 27px knob, 20px of travel.
   States: Default (grey) · Selected (brand green) · Disabled (grey @ 40%)
   ========================================================================== */

.switch { display: inline-flex; align-items: center; cursor: pointer; }
.switch__input { position: absolute; width: 0; height: 0; opacity: 0; }

.switch__track {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 51px; height: 30px;
  padding: 2px;
  border-radius: 15.5px;
  background: var(--neutral-300);
  transition: background-color .18s ease;
}
.switch__knob {
  flex: none;
  width: 27px; height: 27px;
  border-radius: 50%;
  background: var(--neutral-100);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: transform .18s ease;
}

.switch__input:checked + .switch__track { background: var(--background-brand); }
.switch__input:checked + .switch__track .switch__knob { transform: translateX(20px); }

.switch__input:focus-visible + .switch__track { outline: 2px solid var(--primary-200); outline-offset: 2px; }

.switch__input:disabled + .switch__track { opacity: .4; }
.switch:has(.switch__input:disabled) { cursor: not-allowed; }

/* ==========================================================================
   Dropdown  (Figma 668:3374, items 756:2764 / 647:2518)
   Rounded panel of rows; the selected row takes the brand tint.
   size=small is content-width, size=medium is a fixed 256px.
   ========================================================================== */

.dropdown {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-default);
  box-shadow: var(--shadow-md);
}
.dropdown--md { width: 256px; }

.dropdown__item {
  display: flex;
  align-items: center;
  padding: var(--spacing-12) var(--spacing-16);
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-default);
  font-family: var(--font-zh); font-weight: var(--fw-medium);
  font-size: var(--caption-size); line-height: var(--caption-lh);
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.dropdown__item:last-child { border-bottom: 0; }

/* hover is OURS — the design defines only default and selected. Kept subtle so
   it reads as affordance without competing with the selected tint. */
.dropdown__item:hover { background: var(--surface-interactive-hover); }

.dropdown__item--selected,
.dropdown__item--selected:hover { background: var(--background-brand-light); color: var(--text-brand); }

/* ==========================================================================
   Marks — check / cross used in the feature-comparison table
     check 588:2315 · cross 588:2438
   Check is a filled green disc with a white tick; cross is a bare grey glyph.
   ========================================================================== */

.mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
.mark img, .mark svg { display: block; }

.mark--check { background: var(--primary-300); border-radius: 50px; padding: 4px; overflow: hidden; }
.mark--check img, .mark--check svg { width: 100%; height: 100%; object-fit: contain; }

.mark--cross img, .mark--cross svg { width: 10px; height: 10px; object-fit: contain; }

/* ==========================================================================
   Auth card shell  (忘記密碼 619:4283 · 確認您的信箱 619:4310 · 重設密碼 619:4343)
   Full-bleed forest background with a centred white card. Set the background
   per page with --auth-bg. Card is 628px here; pass --auth-card-w to change it.
   pages/login.html predates this and still rolls its own — worth migrating.
   ========================================================================== */

.auth-main {
  min-height: calc(100vh - 76px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: var(--auth-bg) center / cover no-repeat;
}

.auth-card {
  box-sizing: border-box;
  width: var(--auth-card-w, 628px);
  max-width: 100%;
  padding: 24px 32px;
  border-radius: 20px;
  background: var(--surface-default);
}

/* step 1 uses 24px between blocks; steps 2 and 3 use 16 */
.auth-card__inner { display: flex; flex-direction: column; gap: 24px; }
.auth-card__inner--tight { gap: 16px; }

.auth-head { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.auth-head--flush { gap: 0; }   /* 重設密碼 619:4348 has no gap under the title */

.auth-title { margin: 0; font-weight: var(--fw-bold); font-size: var(--title-md-size); line-height: var(--title-md-lh); color: var(--primary-400); }
.auth-sub   { margin: 0; font-weight: var(--fw-medium); font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--text-tertiary); }

.auth-fields  { display: flex; flex-direction: column; gap: 16px; }
.auth-actions { display: flex; flex-direction: column; gap: 16px; }
.auth-links   { display: flex; justify-content: center; }

/* 64px tinted disc holding a 32px icon — 確認您的信箱 619:4318 */
.auth-icon {
  align-self: center;
  flex: none;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--background-brand-light);
  color: var(--text-brand);
  display: flex; align-items: center; justify-content: center;
}
.auth-icon img,
.auth-icon svg { width: 32px; height: 32px; object-fit: contain; display: block; }

/* the "sent to <address>" block — 619:4322, body/16px/M, centred */
.auth-sent { display: flex; flex-direction: column; align-items: center; text-align: center; }
.auth-sent p { margin: 0; font-weight: var(--fw-medium); font-size: var(--body-size); line-height: var(--body-lh); color: var(--text-primary); }

@media (max-width: 767px) {
  .auth-main { min-height: calc(100vh - 66px); padding: 24px 16px; }
  .auth-card { padding: 24px 20px; }
}

/* ==========================================================================
   Result page  (付款成功頁 799:3234 · 付款失敗頁 898:4406)
   Forest hero with a status badge + title, then a 566px detail table.
   Geometry is identical between the two states — only the badge colouring
   changes, so success/failure are modifiers rather than separate blocks.
   ========================================================================== */

.result-hero {
  position: relative;
  margin: 32px auto 0;
  max-width: 1408px;
  height: 312px;
  border-radius: 30px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.result-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* badge + title stack — Figma 800:3415 / 898:4411 (w 104, top 202) */
.result-hero__status {
  position: relative;
  margin-top: 94px;
  width: 104px;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--spacing-8);
}

.result-badge {
  flex: none;
  width: 80px; height: 80px;
  border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
}
.result-badge__icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; }
.result-badge__icon img,
.result-badge__icon svg { width: 100%; height: 100%; object-fit: contain; display: block; }

/* success 800:3413 — translucent primary/200 halo behind a green tick */
.result-badge--success { background: rgba(98, 202, 139, .2); }
/* failure 898:4413 — solid error/100 disc with a white glyph */
.result-badge--failed  { background: var(--error-100); color: var(--text-inverse); }
.result-badge--failed .result-badge__icon { width: 30px; height: 30px; }

.result-hero__title {
  margin: 0;
  width: 100%;
  text-align: center;
  font-weight: var(--fw-bold);
  font-size: var(--title-lg-size); line-height: var(--title-lg-lh);
  color: var(--text-inverse);
  white-space: nowrap;
}

/* ---- Detail table (800:3559 / 898:4417) --------------------------------- */
.result-details {
  width: 566px;
  max-width: calc(100% - 32px);
  margin: 32px auto 0;   /* hero ends at 420, table starts at 452 */
  border: 1px solid var(--border-default);
  border-radius: 16px;
  overflow: hidden;
}
.result-details table { width: 100%; border-collapse: collapse; }

.result-details th,
.result-details td {
  height: 56px;
  padding: 16px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-default);
  font-weight: var(--fw-medium);
  font-size: var(--caption-size); line-height: var(--caption-lh);
}
.result-details th {
  width: 140px;
  background: var(--background-page-subtle);
  color: var(--text-secondary);
  white-space: nowrap;
}
.result-details td { padding-left: 24px; background: var(--surface-default); color: var(--text-primary); }
.result-details tr:last-child th,
.result-details tr:last-child td { border-bottom: 0; }

/* 訂單狀態 value — brand green when paid, error red when failed (900:4734 / 900:4730) */
.result-status { font-weight: var(--fw-bold); line-height: var(--caption-b-lh); }
.result-status--success { color: var(--text-brand); }
.result-status--failed  { color: var(--error-100); }

@media (max-width: 767px) {
  .result-hero { margin: 8px; height: 240px; border-radius: 20px; }
  .result-hero__status { margin-top: 64px; }
  .result-details { margin-top: 32px; }
  .result-details th { width: 104px; padding: 16px 12px; }
  .result-details td { padding-left: 16px; }
}

/* ==========================================================================
   Footer  (Figma 528:2615)
   Dark bar: centred social icon + link row, copyright pinned right.
   ========================================================================== */

/* DEVIATES FROM FIGMA (deliberate): the design butts the #373939 bar straight
   against the white page as a full-bleed square block, which reads as an abrupt
   cut. Rounded the top corners (24px) so it reads as an intentional panel
   rather than a wall — echoing the page's other rounded surfaces (hero 30,
   cards 16, table 12). Everything else matches spec: 96px tall, same colour. */
.footer {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 96px;
  padding: 20px 80px;
  background: var(--surface-inverse);
  border-radius: 24px 24px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.footer__center { display: flex; align-items: center; justify-content: center; gap: 16px; }

.footer__social {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: var(--neutral-100);
  border-radius: var(--radius-xs);
}
.footer__social img,
.footer__social svg { width: 16px; height: 16px; object-fit: contain; display: block; }

.footer__links { display: flex; align-items: center; gap: 8px; }

/* bottom_nav_button 455:2440 */
.footer__link {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 8px;
  font-family: var(--font-zh); font-weight: var(--fw-medium);
  font-size: var(--caption-size); line-height: var(--caption-lh);
  color: var(--text-inverse);
  text-decoration: none;
  white-space: nowrap;
}
.footer__link:hover { text-decoration: underline; text-underline-position: from-font; }

/* pinned right, on the same row as the links (matching their 12px padding and
   24px line box) rather than centred on the footer box. */
.footer__copyright {
  position: absolute; right: 80px; top: 20px;
  padding: 12px 0;
  font-family: var(--font-zh); font-weight: var(--fw-medium);
  font-size: 12px; line-height: 24px;
  color: var(--text-inverse);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .footer { min-height: 0; flex-direction: column; align-items: center; gap: 8px; padding: 20px 16px; border-radius: 20px 20px 0 0; }
  .footer__copyright { position: static; padding: 0; }
}

/* ==========================================================================
   Header  (Figma component set 840:3615)
     device=web   449:494  — 1440 wide, logo + centred tabs + language + login
     device=phone 840:3614 —  375 wide,  66px tall, logo + login + globe button
   One markup, responsive: the web layout collapses to the phone layout below
   768px. Written against the NEW semantic tokens (not the legacy aliases).
   ========================================================================== */

.header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 8px 80px;
  background: var(--background-page);
}

/* ---- Brand: logo + wordmark ---------------------------------------------- */
.header__brand { display: flex; align-items: center; gap: 8px; flex: none; text-decoration: none; }
.header__logo { flex: none; width: 60px; height: 60px; }
.header__logo img,
.header__logo svg { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Colour unified 2026-07-30 (was QA item 9): the web wordmark used to be
   text/primary #373939 while the phone one was primary/400 #064334. She
   resolved it in favour of primary/400, so both platforms are deep green and
   the phone colour override is gone. neutral/700 is still bound on the header
   component, but that is the nav tabs, not the wordmark.
   Line-heights are the text-layer heights read off Figma, not guesses:
     web   410:211  h=32  title/20px/B      410:212  h=20  btm nav/12px/M
     phone 840:3606 h=26  body/16px/B       840:3607 h=18  caption/11px/M */
.header__wordmark { display: flex; flex-direction: column; align-items: flex-start; color: var(--primary-400); }
.header__wordmark-zh { font-family: var(--font-zh); font-weight: var(--fw-bold);   font-size: var(--title-sm-size); line-height: var(--title-sm-lh); }
.header__wordmark-en { font-family: var(--font-zh); font-weight: var(--fw-medium); font-size: var(--nav-size);      line-height: var(--nav-m-lh); }

/* ---- Centred nav (top_nav_tab 449:331) ----------------------------------- */
.header__nav { flex: 1 0 0; min-width: 0; display: flex; align-items: center; justify-content: center; }
.header__tabs { display: flex; align-items: center; }

.header__tab {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-width: 88px;
  padding: 12px 16px;
  border-radius: 5px;
  font-family: var(--font-zh); font-weight: var(--fw-medium);
  font-size: var(--body-size); line-height: var(--body-lh);
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
}
.header__tab:hover,
.header__tab[data-state="hover"] { color: var(--text-brand); }

/* selected tab — brand colour + 24x3 pill underline */
.header__tab[aria-current="page"] { color: var(--text-brand); }
.header__tab[aria-current="page"]::after {
  content: "";
  position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%);
  width: 24px; height: 3px;
  border-radius: 10px;
  background: var(--text-brand);
}

/* ---- Right cluster -------------------------------------------------------- */
.header__actions { display: flex; align-items: center; gap: 12px; flex: none; }

/* language Select Field (449:476, instance of Select Field 430:440) */
/* 130px as of 2026-07-30 (was 120px, QA item 10 — she took the widening).
   「繁體中文」at 16px is 64px, so the control now has real slack instead of
   fitting to the pixel. Select Field instance 449:476. */
.header__lang { flex: none; width: 130px; }
.header__lang-control {
  box-sizing: border-box;
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-width: 130px;
  padding: 12px 12px 12px 16px;
  background: var(--surface-default);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
/* nowrap: at 120px the box is exactly wide enough for 繁體中文 + caret, so any
   rounding pushes the label onto a second line. */
.header__lang-value { flex: 1 0 0; min-width: 0; white-space: nowrap; font-family: var(--font-zh); font-weight: var(--fw-medium); font-size: var(--body-size); line-height: var(--body-lh); color: var(--text-primary); }
.header__lang-caret { flex: none; width: 20px; height: 20px; }
.header__lang-caret img,
.header__lang-caret svg { width: 100%; height: 100%; object-fit: contain; display: block; }

/* globe icon button — phone only (840:3610) */
.header__globe {
  box-sizing: border-box;
  display: none;
  flex: none;
  width: 36px; height: 36px;
  padding: 10px;
  align-items: center; justify-content: center;
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  cursor: pointer;
}
.header__globe img,
.header__globe svg { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---- Phone (< 768px) — Figma 840:3614 ------------------------------------ */
@media (max-width: 767px) {
  /* 66 = 12 (top) + 46 (content) + 8 (bottom) — asymmetric in Figma 840:3592,
     which sits at y=12 and is 46px tall. Symmetric 12/12 leaves only 42px and
     clips the wordmark. */
  .header { height: 66px; gap: 0; padding: 12px 16px 8px; align-items: flex-start; }

  .header__brand { flex: 1 0 0; min-width: 0; gap: 4px; }
  .header__logo { width: 42px; height: 42px; }

  /* Colour is no longer overridden here — the web wordmark now matches. */
  .header__wordmark { justify-content: center; gap: 2px; }
  /* Both line-heights are pinned rather than inherited: the desktop rules carry
     absolute 32px / 20px, and the phone lockup is a different pair of styles.
     26 + 2 + 18 = 46, exactly the height of Figma 840:3605. */
  .header__wordmark-zh { font-size: var(--body-b-size);    line-height: var(--body-b-lh); }
  .header__wordmark-en { font-size: var(--caption-xs-size); line-height: var(--caption-xs-lh); width: 74px; }

  .header__nav,
  .header__lang { display: none; }

  .header__actions { gap: 8px; justify-content: center; }
  .header__globe { display: inline-flex; }

  /* login button steps down btn--lg -> btn--md (Figma 840:3609) */
  .header__login { font-size: var(--caption-size); line-height: var(--caption-lh); padding: 8px 12px; border-radius: 5px; }
}