.member-page {
  background: radial-gradient(ellipse at 6% 20%, #1c353d66, transparent 48%),
    radial-gradient(ellipse at 95% 85%, #644e2d24, transparent 45%), #07131c;
  color: #f6efdf;
}
.member-main {
  width: min(1112px, calc(100% - 80px));
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) 0 32px;
}
.member-main [hidden] { display: none !important; }
.member-intro { margin-bottom: 38px; }
.member-eyebrow {
  margin: 0 0 20px;
  color: #c8b48a;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .23em;
}
.member-eyebrow span { padding: 0 8px; color: #988b70; }
.member-main h1,
.member-main h2 { font-family: "Noto Serif TC", "Songti TC", "PMingLiU", serif; font-weight: 500; }
.member-main h1 { width: auto; margin: 0; font-size: clamp(32px, 3.2vw, 44px); line-height: 1.35; letter-spacing: .13em; }
.member-intro-copy { margin: 17px 0 0; color: #b5c3c6; font-size: 14px; line-height: 1.9; letter-spacing: .05em; }
.member-layout { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, .85fr); gap: 34px; align-items: stretch; }
.member-panel { align-self: start; border: 1px solid #bfa57759; border-radius: 22px; background: linear-gradient(130deg, #17262fdd, #101d25ed); box-shadow: 0 14px 60px #0002; overflow: hidden; }
.member-guest, .member-loading { padding: 50px 30px; text-align: center; }
.member-loading { min-height: 425px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #cdd5d5; }
.member-loading p { font-size: 14px; letter-spacing: .08em; line-height: 1.8; }
.member-state-icon { display: grid; place-items: center; width: 70px; height: 70px; margin: 0 auto 25px; border: 1px solid #bfa5774d; border-radius: 50%; background: #dcc59b08; color: #d8be8d; }
.member-state-icon svg { width: 44px; height: 44px; }
.member-section-label { margin: 0; color: #c7b38b; font-size: 12px; line-height: 1.7; letter-spacing: .1em; }
.member-guest h2 { margin: 12px 0 14px; font-size: clamp(23px, 2vw, 28px); line-height: 1.6; letter-spacing: .03em; }
.member-support-copy { margin: 0; color: #b5c3c6; font-size: 14px; line-height: 1.9; }
.member-google-login { min-height: 46px; margin-top: 26px; padding: 10px 27px; font-size: 14px; }
.member-guest-note { margin: 17px 0 0; color: #99aaaf; font-size: 12px; line-height: 1.8; }
.member-profile { padding: 34px; }
.member-profile-heading { display: flex; align-items: center; gap: 21px; padding-bottom: 28px; }
.member-avatar-wrap { width: 80px; height: 80px; flex: 0 0 80px; border: 1px solid #c7ae7a66; border-radius: 50%; overflow: hidden; background: #d8bc8520; }
.member-avatar { display: block; width: 100%; height: 100%; object-fit: cover; }
.member-avatar-fallback { display: grid; place-items: center; width: 100%; height: 100%; color: #d5bd93; }
.member-avatar-fallback svg { width: 48px; height: 48px; }
.member-profile h2 { margin: 5px 0 9px; font-size: 27px; line-height: 1.4; letter-spacing: .07em; }
.member-badge { display: inline-block; padding: 4px 10px; border: 1px solid #c7ae7a4d; border-radius: 999px; background: #c7ae7a12; color: #e1c995; font-size: 11px; letter-spacing: .08em; line-height: 1.5; }
.member-details { margin: 0; }
.member-details > div { padding: 17px 0; border-top: 1px solid #aabbc022; }
.member-details dt { margin-bottom: 7px; color: #9eb1b8; font-size: 12px; line-height: 1.6; letter-spacing: .04em; }
.member-details dd { min-height: 25px; margin: 0; color: #f7f1e5; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.member-details .member-email { font-size: 14px; }
.member-profile-footer { display: flex; align-items: center; gap: 16px; justify-content: space-between; padding-top: 22px; border-top: 1px solid #aabbc022; }
.member-profile-footer p { margin: 0; color: #99aaaf; font-size: 11px; line-height: 1.8; }
.member-logout, .member-retry { flex: 0 0 auto; min-height: 42px; border: 1px solid #a8b7bc66; border-radius: 999px; padding: 9px 21px; background: transparent; color: #e1e7e7; font-size: 13px; cursor: pointer; }
.member-logout:hover:not(:disabled), .member-retry:hover:not(:disabled) { background: #ffffff0d; border-color: #e1c995; }
.member-main button:disabled { opacity: .6; cursor: wait; }
.member-error { margin: 0 28px 28px; padding: 17px; border: 1px solid #d2b47b66; border-radius: 12px; background: #d2b47b0c; }
.member-error p { margin: 0 0 12px; color: #e6d3ac; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.member-retry { min-height: 36px; padding: 7px 14px; font-size: 12px; }
.member-noscript { margin: 26px; color: #e6d3ac; font-size: 14px; line-height: 1.8; }
.member-journey { padding: 20px 0 8px 14px; }
.member-journey h2 { margin: 15px 0 17px; font-size: clamp(26px, 2.5vw, 34px); line-height: 1.65; letter-spacing: .07em; }
.member-journey-copy { margin: 0 0 28px; color: #a8bac0; font-size: 13px; line-height: 1.9; }
.member-deck-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 100px; margin-top: 14px; padding: 20px; border: 1px solid #9ebac033; border-radius: 14px; background: #233b462e; }
.member-deck-link:hover { border-color: #d9c49499; background: #2b444c55; }
.member-deck-heart { background: #55472c20; border-color: #ba9c613d; }
.member-deck-heart:hover { background: #69563330; }
.member-deck-caption { display: flex; flex-direction: column; gap: 6px; font-size: 11px; color: #aebdc0; line-height: 1.7; letter-spacing: .04em; }
.member-deck-name { color: #f1ebdc; font-family: Georgia, "Times New Roman", serif; font-size: 22px; line-height: 1.2; letter-spacing: .02em; }
.member-deck-action { display: flex; gap: 9px; align-items: center; color: #d7c096; font-size: 11px; line-height: 1.7; white-space: nowrap; }
.member-deck-action > span { font-size: 20px; }
.member-closing { margin: 34px 0 0; text-align: center; color: #83989f; font-size: 11px; line-height: 1.8; letter-spacing: .09em; }

@media (min-width: 768px) and (max-width: 1000px) {
  .member-main { width: calc(100% - 56px); }
  .member-layout { gap: 25px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .member-profile { padding: 25px; }
  .member-profile-heading { gap: 16px; }
  .member-journey { padding-left: 0; }
  .member-deck-link { padding: 17px 14px; }
  .member-deck-action { font-size: 10px; gap: 5px; }
  .member-deck-name { font-size: 20px; }
  .member-profile-footer { align-items: flex-start; }
}

@media (max-width: 767px) {
  .member-main { width: calc(100% - 40px); max-width: 540px; padding-top: 85px; padding-bottom: 30px; }
  .member-intro { margin-bottom: 28px; }
  .member-eyebrow { font-size: 10px; letter-spacing: .16em; margin-bottom: 16px; }
  .member-eyebrow span { padding-inline: 4px; }
  .member-main h1 { font-size: 33px; }
  .member-intro-copy { font-size: 12px; margin-top: 13px; letter-spacing: .02em; }
  .member-layout { grid-template-columns: minmax(0, 1fr); gap: 35px; }
  .member-panel { border-radius: 18px; }
  .member-guest { padding: 34px 18px; }
  .member-guest h2 { font-size: 23px; }
  .member-state-icon { margin-bottom: 22px; }
  .member-support-copy { font-size: 13px; }
  .member-loading { padding: 30px 20px; min-height: 330px; }
  .member-profile { padding: 25px 22px; }
  .member-profile-heading { gap: 18px; padding-bottom: 24px; }
  .member-avatar-wrap { width: 68px; height: 68px; flex-basis: 68px; }
  .member-profile h2 { font-size: 25px; }
  .member-details > div { padding: 16px 0; }
  .member-profile-footer { gap: 12px; }
  .member-profile-footer p { max-width: 185px; }
  .member-error { margin: 0 20px 20px; }
  .member-journey { padding: 0 2px; }
  .member-journey h2 { margin: 10px 0 13px; font-size: 28px; }
  .member-journey-copy { margin-bottom: 22px; font-size: 12px; }
  .member-deck-link { padding: 19px; min-height: 96px; }
  .member-closing { margin-top: 28px; }
}

@media (max-width: 359px) {
  .member-main { width: calc(100% - 32px); }
  .member-guest h2 { font-size: 21px; }
  .member-profile { padding-inline: 18px; }
  .member-profile-heading { gap: 13px; }
  .member-deck-link { padding-inline: 15px; }
  .member-deck-action { font-size: 10px; gap: 5px; }
}

.member-shipments { margin-top: 38px; padding: 28px; border: 1px solid #bfa57759; border-radius: 22px; background: #111f28; }
.shipments-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.shipments-heading h2 { margin: 0 0 10px; font-size: 26px; line-height: 1.4; }
.shipments-heading p, .shipments-empty p, .shipments-loading { margin: 0; color: #b5c3c6; font-size: 13px; line-height: 1.8; }
.shipments-heading > .member-retry { margin-top: 2px; }
.shipments-empty { padding: 30px 15px; border: 1px dashed #aabbc044; border-radius: 12px; text-align: center; }
.shipments-empty h3 { margin: 0 0 12px; font-size: 17px; font-weight: 500; }
.shipments-error { padding: 16px; margin-bottom: 18px; border: 1px solid #d2b47b66; border-radius: 10px; color: #e6d3ac; background: #d2b47b0c; }
.shipments-error p { margin: 0 0 12px; font-size: 13px; line-height: 1.8; }
.shipments-list { display: grid; gap: 18px; }
.member-shipment { min-width: 0; padding: 22px; border: 1px solid #aabbc033; border-radius: 14px; background: #0a1720; }
.shipment-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; }
.shipment-heading h3 { margin: 2px 0 0; font-size: 16px; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
.shipment-status { display: inline-block; flex: 0 0 auto; max-width: 50%; padding: 5px 10px; border-radius: 20px; border: 1px solid #c7ae7a66; color: #e1c995; background: #c7ae7a12; font-size: 11px; line-height: 1.5; text-align: center; }
.shipment-status[data-status="delivered"] { color: #b8e9ca; border-color: #77b28b80; background: #49785b20; }
.shipment-status[data-status="exception"], .shipment-status[data-status="failed"] { color: #ffc3b3; border-color: #cf897380; background: #cf897314; }
.shipment-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 30px; margin: 22px 0; }
.shipment-details dt { margin-bottom: 5px; color: #9eb1b8; font-size: 11px; line-height: 1.6; }
.shipment-details dd { margin: 0; color: #f1eade; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.shipment-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.shipment-carrier-link { display: inline-block; padding-block: 9px; color: #e1c995; font-size: 12px; line-height: 1.7; text-decoration: underline; text-underline-offset: 4px; }
.shipment-history { margin-top: 20px; padding-top: 18px; border-top: 1px solid #aabbc02b; }
.shipment-history summary { padding: 5px 0; cursor: pointer; color: #d4c09b; font-size: 13px; line-height: 1.6; }
.shipment-events { list-style: none; margin: 20px 0 0; padding: 0; }
.shipment-events li { position: relative; padding: 0 0 24px 21px; border-left: 1px solid #c7ae7a4d; overflow-wrap: anywhere; }
.shipment-events li::before { content: ''; position: absolute; left: -4px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: #c7ae7a; }
.shipment-events li:last-child { padding-bottom: 0; }
.shipment-events time { display: block; margin-bottom: 7px; color: #9eb1b8; font-size: 11px; line-height: 1.6; }
.shipment-events strong { font-size: 13px; font-weight: 500; line-height: 1.7; }
.shipment-events p, .shipment-no-events { margin: 7px 0 0; color: #bcc7ca; font-size: 12px; line-height: 1.8; }
.shipment-events .shipment-location { color: #9eb1b8; }
.member-shipments button:focus-visible, .member-shipments a:focus-visible, .shipment-history summary:focus-visible { outline: 2px solid #e1c995; outline-offset: 4px; }
.member-shipments button[aria-disabled="true"] { opacity: .6; cursor: wait; }
@media (max-width: 767px) {
  .member-shipments { padding: 23px 18px; margin-top: 30px; border-radius: 18px; }
  .shipments-heading { gap: 12px; flex-wrap: wrap; }
  .shipments-heading h2 { font-size: 24px; }
  .member-shipment { padding: 18px 15px; }
  .shipment-heading { flex-wrap: wrap; gap: 10px; }
  .shipment-heading h3 { font-size: 15px; }
  .shipment-status { max-width: 100%; }
  .shipment-details { column-gap: 18px; }
}
@media (max-width: 389px) {
  .shipment-details { grid-template-columns: minmax(0, 1fr); }
  .shipment-actions { gap: 8px; }
}