:root {
  color-scheme: dark;
  --gold: #c7a56a;
  --pale: #f0d29a;
  /* 保留上传文件中的电脑端边距 */
  --side-gap: 188px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  color: var(--pale);
  background: #110104;
  font-family: Arial, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

button, input { font: inherit; }

.page {
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  width: max(0px, calc(100% - 2 * var(--side-gap)));
  height: 100vh;
  height: 100dvh;
  margin-inline: auto;
  overflow: hidden;
  background: #000;
}

.background {
  position: absolute;
  z-index: -3;
  inset: 0;
  background: #04130f;
  transform: none;
  transform-origin: center;
}
.background img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.shade {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 33%,
    rgba(0, 18, 14, .28) 56%,
    rgba(0, 14, 11, .91) 79%,
    #00100d 100%
  );
}

.topbar {
  position: relative;
  z-index: 1;
  flex: 0 0 50px;
  border-bottom: 1px solid rgba(171, 131, 65, .15);
  background: rgba(0, 15, 13, .83);
}

.header-entries {
  position: absolute;
  top: 7px;
  left: calc(8px + 10mm);
  display: flex;
  gap: 8px;
}
.agent, .member {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 36px;
  border: 1px solid #6d5d36;
  border-radius: 4px;
  background: linear-gradient(#23352e, #0d201d);
  box-shadow: inset 0 0 0 2px #192c25, 0 1px 8px #000;
  color: #d4b678;
  font-size: 12px;
  letter-spacing: 2px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease, transform .2s ease;
}

.agent:hover, .member:hover,
.agent:focus-visible, .member:focus-visible {
  border-color: #efd08a;
  background: linear-gradient(#345042, #17342b);
  box-shadow: inset 0 0 0 2px rgba(239, 208, 138, .32), 0 0 14px rgba(231, 186, 96, .55);
  color: #ffe8b1;
  transform: translateY(-1px);
}
.agent:hover::before, .agent:hover::after,
.member:hover::before, .member:hover::after,
.agent:focus-visible::before, .agent:focus-visible::after,
.member:focus-visible::before, .member:focus-visible::after { color: #ffe2a1; }

@media (prefers-reduced-motion: reduce) {
  .agent, .member { transition: none; }
}

.agent::before,
.agent::after,
.member::before,
.member::after {
  content: "✦";
  position: absolute;
  top: 9px;
  color: #b69350;
  font-size: 9px;
}

.agent::before, .member::before { left: 6px; }
.agent::after, .member::after { right: 6px; }

.languages {
  position: absolute;
  top: 8px;
  right: calc(8px + 10mm);
  display: flex;
  gap: 4px;
  max-width: calc(100% - 296px - 20mm);
  padding: 3px 5px;
  overflow-x: auto;
  border: 1px solid #586645;
  border-radius: 9px;
  background: #12221e;
  box-shadow: 0 0 0 2px #07120f;
  scrollbar-width: none;
}

.languages::-webkit-scrollbar { display: none; }

.languages button {
  flex: 0 0 38px;
  width: 38px;
  height: 26px;
  padding: 0;
  border: 1px solid #a48d5a;
  border-radius: 5px;
  background: #27352d;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.languages picture, .languages img { display: block; width: 34px; height: 23px; }
.languages img { object-fit: contain; border-radius: 2px; }
.languages button:focus-visible, .languages button.is-active { border-color: #f7dc99; box-shadow: 0 0 0 2px rgba(246,210,132,.55); }
.language-toggle { display: none; }

button:focus-visible {
  outline: 2px solid #ffdf94;
  outline-offset: 3px;
}
button:active, a:active, button.is-clicked, a.is-clicked {
  outline: 2px solid #e5c47a;
  outline-offset: 2px;
}

.content {
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: center;
  justify-content: flex-end;
  width: calc(100% - 44px);
  margin: 0 44px 0 0;
  padding: clamp(6px, 2vh, 20px) 0;
}

.login {
  position: relative;
  flex: 0 0 auto;
  transform: scale(var(--panel-scale, 1));
  transform-origin: center;
  width: min(100%, 360px);
  padding: 20px 30px 29px;
  border: 1px solid rgba(159, 132, 79, .35);
  background:
    radial-gradient(ellipse 90% 180px at 50% 0%, rgba(225, 185, 106, .18), transparent 75%),
    linear-gradient(145deg, rgba(11, 39, 30, .98), rgba(1, 21, 17, .98) 70%);
  box-shadow:
    0 20px 45px rgba(0, 0, 0, .32),
    inset 0 12px 28px rgba(211, 173, 96, .09),
    inset 0 0 50px rgba(48, 66, 41, .09);
}
.login::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 16%;
  width: 68%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e6c883, transparent);
  box-shadow: 0 2px 14px 2px rgba(222, 182, 100, .3);
  pointer-events: none;
}

.official-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 4px;
  color: #d9b879;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-shadow: 0 1px 5px rgba(222,174,95,.28);
}
.official-label::before, .official-label::after {
  content: "";
  width: 31px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ae874a);
}
.official-label::after { transform: rotate(180deg); }

.brand-image {
  display: block;
  width: 210px;
  height: auto;
  margin: 0 auto 16px;
}
.brand-picture { display: block; }

.entry-buttons {
  display: grid;
  gap: 9px;
}

.entry-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 45px;
  border: 1px solid #a77c42;
  background: linear-gradient(100deg, #917044, #e3c17c 48%, #856038);
  color: #271906;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 4px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,240,191,.35), 0 2px 5px rgba(0,0,0,.28);
}

.entry-button:hover { filter: brightness(1.1); }
.entry-button:focus-visible, .entry-button:active, .entry-button.is-active { border-color: #ffe4a2; box-shadow: 0 0 0 2px rgba(255,225,145,.62), 0 0 18px rgba(234,190,101,.48), inset 0 1px 0 rgba(255,240,191,.4); }

.entry-button.customer-service {
  margin-top: 5px;
  border: 2px solid #e5c77b;
  border-radius: 7px;
  background: linear-gradient(100deg, #082c25, #175046 50%, #082b24);
  color: #ffe5a6;
  box-shadow: inset 0 0 0 2px rgba(239,201,124,.38), 0 0 18px rgba(232,190,98,.35);
  text-shadow: 0 0 8px rgba(246,214,150,.5);
}

.entry-button.customer-service:hover { box-shadow: inset 0 0 0 2px rgba(239,201,124,.55), 0 0 25px rgba(232,190,98,.6); }

body.modal-open { overflow: hidden; }
.modal-backdrop[hidden] { display: none; }
.modal-backdrop {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .76);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.service-modal {
  position: relative;
  width: min(100%, 820px);
  padding: 18px 18px 18px;
  border: 1px solid #b79459;
  background: linear-gradient(145deg, #123228, #031b15 75%);
  box-shadow: 0 24px 70px rgba(0,0,0,.65), inset 0 0 0 3px rgba(207,173,108,.1);
}
.modal-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: calc(100% - 84px);
  min-height: 32px;
  margin: 0 auto 10px;
  padding: 4px 14px;
  border: 1px solid #e4bb62;
  border-radius: 6px;
  background: linear-gradient(180deg, #f3ce78, #bf7b1d);
  color: #4a2105;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 240, 180, .45), 0 0 10px rgba(207, 155, 69, .25);
}
.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0 0 3px;
  border: 1px solid #cba65f;
  border-radius: 5px;
  outline: none;
  background: linear-gradient(145deg, #254133, #091d18);
  box-shadow: inset 0 0 0 1px rgba(243, 209, 137, .27), 0 0 12px rgba(215, 170, 76, .56);
  color: #f3d393;
  font: 27px/1 Georgia, serif;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease, transform .2s ease;
}
.modal-close:hover, .modal-close:focus-visible {
  border-color: #ffe4a2;
  outline: none;
  background: linear-gradient(145deg, #385841, #102b20);
  box-shadow: inset 0 0 0 1px rgba(255, 226, 159, .58), 0 0 20px rgba(240, 192, 93, .85);
  color: #fff0c4;
  transform: scale(1.07);
}
.modal-close:active, .modal-close.is-clicked { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .modal-close { transition: none; }
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.frame-shell { position: relative; height: min(68vh, 680px); height: min(78dvh, 680px, calc(100dvh - 120px)); min-height: 0; background: #071d18; }
.frame-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #dbbc7e; font-size: 14px; letter-spacing: 2px; background: #071d18; }
.frame-shell.is-loaded .frame-loading { display: none; }
#modal-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #071d18;
  visibility: hidden;
}
.frame-shell.is-loaded #modal-frame { visibility: visible; }

footer {
  flex: 0 0 auto;
  padding: 9px 16px 12px;
  text-align: center;
  color: #c3ae82;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .2px;
  background: transparent;
  text-shadow: 0 1px 4px #000;
}
.footer-certification { margin-top: 5px; font-size: .95em; }

/* 窗口较窄时自动缩小两侧空隙 */
@media (max-width: 1300px) {
  :root {
    --side-gap: max(0px, 50vw - 350px);
  }
}

@media (max-width: 700px) {
  .modal-backdrop { padding: 10px; }
  .service-modal { padding: 12px 10px 10px; }
  .modal-close { top: 12px; right: 10px; }
  .modal-heading { margin-bottom: 8px; font-size: 16px; }
  .frame-shell { height: min(82vh, 720px); height: min(85dvh, 720px, calc(100dvh - 86px)); }
  .topbar { z-index: 3; flex-basis: 54px; }
  .header-entries { left: 8px; width: calc(100% - 132px); gap: 6px; }
  .agent, .member { width: min(132px, calc((100% - 6px) / 2)); }
  .page { width: 100%; }

  .background { transform: scale(1.12); }
  .background img { object-position: 26% center; }

  .shade {
    background: linear-gradient(
      180deg,
      rgba(0, 15, 12, .30),
      rgba(0, 14, 11, .78)
    );
  }

  .language-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 108px;
    height: 36px;
    padding: 3px 8px;
    border: 1px solid #aa8951;
    border-radius: 6px;
    background: #122b23;
    color: #f0d29a;
    font-size: 13px;
    cursor: pointer;
  }
  .language-toggle img { display: block; width: 34px; height: 23px; object-fit: contain; }
  .language-arrow { margin-left: auto; transition: transform .2s ease; }
  .language-toggle[aria-expanded="true"] .language-arrow { transform: rotate(180deg); }
  .language-toggle:focus-visible, .language-toggle[aria-expanded="true"] {
    border-color: #f4d38d;
    box-shadow: 0 0 0 2px rgba(220, 177, 94, .35);
  }
  .languages {
    top: 48px;
    right: 8px;
    left: auto;
    display: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    width: min(240px, calc(100vw - 16px));
    max-width: none;
    max-height: min(55vh, 380px);
    padding: 8px;
    overflow-y: auto;
    scrollbar-width: none;
    border-color: #aa8951;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .6);
  }
  .languages::-webkit-scrollbar { display: none; }
  .languages.is-open { display: grid; }
  .languages button { width: 100%; height: 40px; justify-content: center; padding: 5px; }

  .content {
    justify-content: center;
    width: min(100% - 32px, 400px);
    margin-inline: auto;
    padding: clamp(6px, 3vh, 24px) 0;
  }

  .login {
    width: min(100%, 360px);
  }

  footer {
    padding-inline: 8px;
    padding-bottom: 13px;
    line-height: 1.5;
    font-size: clamp(7px, 2.5vw, 11px);
    letter-spacing: 0;
  }
  footer > div { white-space: nowrap; }
}

@media (max-width: 400px) {
  .login { padding: 18px 21px 24px; }
}

@media (max-height: 650px) {
  .login { padding-top: 12px; padding-bottom: 13px; }
  .brand-image { width: 170px; margin-bottom: 8px; }
  .entry-buttons { gap: 5px; }
  .entry-button { min-height: 38px; }
  footer { padding-top: 4px; padding-bottom: 5px; }
  .footer-certification { margin-top: 2px; }
}

@media (max-width: 360px) {
  .agent, .member { font-size: 11px; letter-spacing: 0; }
  .language-toggle { min-width: 102px; padding-inline: 4px; gap: 4px; }
}

/* Longer translated labels keep the existing layout on narrow displays. */
html:not([lang^="zh"]) .agent,
html:not([lang^="zh"]) .member { font-size: 10px; letter-spacing: 0; text-align: center; }
html:not([lang^="zh"]) .entry-button { font-size: clamp(12px, 1.5vw, 16px); letter-spacing: .3px; text-align: center; padding-inline: 5px; }
html:not([lang^="zh"]) .language-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:not([lang^="zh"]) .modal-heading { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  html:not([lang^="zh"]) footer > div { white-space: normal; }
}