/* =====================================================================
   login.css — 登入相關頁面專屬樣式
   ---------------------------------------------------------------------
   適用：login.html（登入＋忘記密碼跳窗）、reset-password.html（重設密碼／
         結果頁）、force-change-password.html（首次登入強制變更）。
   這幾頁是獨立於後台框架的「品牌入口」全屏頁，採深色科技視覺，與後台
   工作區的明亮介面是兩套語言；故樣式自成一檔，並在 .login-page 區域內
   自帶一組局部色票（teal／gold），不污染全站三層 token（深色主題的
   語意與後台亮色 token 不相容，色彩維持局部）。
   尺寸／間距／字級沿用 style.css 的 token 與 rem 單位；唯背景場景的
   裝飾幾何（光暈、節點、網格、遮罩、髮絲線）為手調美術值，維持 px。
   跳窗、按鈕、表單提示沿用 style.css 的房規元件（.modal／.btn／.modal-note）。
   ===================================================================== */

/* ── 全屏容器與局部色票 ───────────────────────────────────────── */
.login-page {
  --lp-gold: #e7b95a;
  --lp-gold-2: #c8923a;
  --lp-teal: #27c2b4;
  --lp-teal-2: #0e8e8c;
  --lp-ink: #eaf3f9;
  --lp-ink-2: #a9c2d6;

  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--lp-ink);
  background: radial-gradient(125% 120% at 78% -8%,
      #103257 0%, #08203c 42%, #051428 72%, #03101f 100%);
}

/* 登入頁顯示時鎖定 body 捲動，避免雙重 scrollbar */
body.login-open {
  overflow: hidden;
}

/* ── 背景場景（純裝飾，不可互動；皆為手調美術幾何，維持 px）──────── */
.lp-scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.lp-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(130, 180, 220, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130, 180, 220, .05) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask: radial-gradient(110% 110% at 64% 32%, #000 0%, transparent 78%);
  mask: radial-gradient(110% 110% at 64% 32%, #000 0%, transparent 78%);
}

.lp-map {
  position: absolute;
  left: -5%;
  bottom: -7%;
  width: 66%;
  height: 96%;
  background: url("../images/login-map-dots.png") no-repeat left bottom / contain;
  opacity: .92;
  filter: saturate(1.15) brightness(1.06);
  -webkit-mask: radial-gradient(120% 105% at 28% 78%, #000 42%, transparent 86%);
  mask: radial-gradient(120% 105% at 28% 78%, #000 42%, transparent 86%);
}

.lp-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
}

.lp-glow--gold {
  width: 660px;
  height: 660px;
  right: -9%;
  top: 14%;
  opacity: .5;
  background: radial-gradient(circle, rgba(231, 185, 90, .55), rgba(231, 185, 90, .13) 46%, transparent 70%);
  animation: lpFloatA 19s ease-in-out infinite alternate;
}

.lp-glow--teal {
  width: 560px;
  height: 560px;
  left: -7%;
  top: -14%;
  opacity: .5;
  background: radial-gradient(circle, rgba(39, 194, 180, .5), transparent 68%);
  animation: lpFloatB 23s ease-in-out infinite alternate;
}

.lp-glow--dawn {
  width: 1100px;
  height: 560px;
  left: 50%;
  bottom: -46%;
  transform: translateX(-50%);
  opacity: .4;
  background: radial-gradient(circle, rgba(231, 185, 90, .4), rgba(231, 150, 70, .12) 40%, transparent 66%);
}

.lp-node {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lp-teal);
  box-shadow: 0 0 0 0 rgba(39, 194, 180, .5);
  animation: lpPulse 3.4s ease-out infinite;
}

.lp-node--gold {
  background: var(--lp-gold);
  box-shadow: 0 0 0 0 rgba(231, 185, 90, .5);
  animation-name: lpPulseG;
}

.lp-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 92% at 52% 40%, transparent 52%, rgba(2, 9, 20, .66) 100%);
}

@keyframes lpFloatA {
  from { transform: translate(0, 0); }
  to   { transform: translate(-46px, 34px); }
}
@keyframes lpFloatB {
  from { transform: translate(0, 0); }
  to   { transform: translate(40px, 30px); }
}
@keyframes lpPulse {
  0%   { box-shadow: 0 0 0 0 rgba(39, 194, 180, .5); opacity: 1; }
  70%  { box-shadow: 0 0 0 16px rgba(39, 194, 180, 0); opacity: .55; }
  100% { box-shadow: 0 0 0 0 rgba(39, 194, 180, 0); opacity: 1; }
}
@keyframes lpPulseG {
  0%   { box-shadow: 0 0 0 0 rgba(231, 185, 90, .5); opacity: 1; }
  70%  { box-shadow: 0 0 0 16px rgba(231, 185, 90, 0); opacity: .55; }
  100% { box-shadow: 0 0 0 0 rgba(231, 185, 90, 0); opacity: 1; }
}

/* ── 登入頁版面（左品牌／右登入卡）─────────────────────────── */
.lp-inner {
  position: relative;
  z-index: 2;
  width: min(1180px, 92vw);
  margin: auto;
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: 3.75rem;
  align-items: center;
  padding: var(--space-40) var(--space-28);
}

.lp-brand {
  max-width: 35rem;
}

.lp-mark {
  display: flex;
  align-items: center;
  gap: 0.8125rem;
  margin-bottom: 1.875rem;
}

.lp-mark__ic {
  width: 3.125rem;
  height: 3.125rem;
  flex: none;
  border-radius: 0.875rem;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--lp-teal), #7fe6da);
  box-shadow: 0 8px 26px rgba(39, 194, 180, .4), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.lp-mark__ic img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  display: block;
}

/* 共同品牌（貿易署＋貿協）：兩標水平並排（縮小）＋下方站名。
   深底白色；貿協彩色版以濾色轉白。 */
.lp-cobrand {
  margin-bottom: 1.875rem;
}
.lp-cobrand__logos {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex-wrap: wrap;
}
.lp-cobrand__img { display: block; width: auto; }
.lp-cobrand__img--trade { height: 24px; }
.lp-cobrand__img--taitra { height: 28px; }
.lp-cobrand__site {
  padding-left: 38px;
  margin-top: var(--space-20);
  font-size: 1.5rem;
  font-weight: var(--font-weight-heavy);
  color: #fff;
  letter-spacing: .04em;
  border-left: 3px solid #ffffff;
  line-height: 1;
}
.lp-cobrand--sm { margin-bottom: var(--space-18); }
.lp-cobrand--sm .lp-cobrand__logos { gap: var(--space-12); }
.lp-cobrand--sm .lp-cobrand__img--trade { height: 1.1875rem; }
.lp-cobrand--sm .lp-cobrand__img--taitra { height: 0.875rem; }
.lp-cobrand--sm .lp-cobrand__site { margin-top: 0.5625rem; font-size: 0.8125rem; }

.lp-mark__txt b {
  display: block;
  font-size: var(--font-size-body-m);
  font-weight: 800;   /* 無對應 token（heavy=700），維持 800 以保視覺 */
  color: #fff;
  letter-spacing: .02em;
}

.lp-mark__txt i {
  display: block;
  font-style: normal;
  font-size: 0.6563rem;
  letter-spacing: .16em;
  color: var(--lp-ink-2);
  margin-top: var(--space-2);
}

.lp-title {
  font-size: clamp(2.125rem, 3.5vw, 3.25rem);
  line-height: 1.18;
  font-weight: 800;   /* 無對應 token，維持 800 */
  letter-spacing: .01em;
  margin: 0 0 var(--space-18);
  color: #fff;
}

.lp-title span {
  background: linear-gradient(98deg, #46ddcd 0%, #a8efe6 38%, var(--lp-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp-desc {
  font-size: 0.9375rem;
  line-height: 1.95;
  color: var(--lp-ink-2);
  max-width: 29.875rem;
  margin: 0 0 1.875rem;
}

.lp-feats {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  max-width: 30.375rem;
}

.lp-feats li {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  padding: 0.6875rem var(--space-14) 0.6875rem var(--space-12);
  border-radius: 0.8125rem;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .09);
}

.lp-feats li > i {
  width: 2.125rem;
  height: 2.125rem;
  flex: none;
  border-radius: 0.5625rem;
  display: grid;
  place-items: center;
  font-size: 1.0625rem;
  color: var(--lp-teal);
  background: rgba(39, 194, 180, .13);
  border: 1px solid rgba(39, 194, 180, .25);
}

.lp-feats b {
  display: block;
  font-size: 0.8438rem;
  color: #fff;
  font-weight: var(--font-weight-heavy);
}

.lp-feats span {
  display: block;
  font-size: 0.6875rem;
  color: var(--lp-ink-2);
  margin-top: var(--space-2);
}

/* ── 玻璃登入卡 ──────────────────────────────────────────────── */
.lp-card {
  position: relative;
  border-radius: 1.25rem;
  padding: 2.125rem 2rem 1.75rem;
  background: linear-gradient(160deg, rgba(20, 42, 70, .66), rgba(9, 24, 44, .6));
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 34px 80px rgba(2, 10, 24, .62), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.lp-card::before {
  content: "";
  position: absolute;
  left: var(--space-24);
  right: var(--space-24);
  top: 0;
  height: 2px;   /* 髮絲裝飾線，維持 px */
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--lp-teal), var(--lp-gold), transparent);
  opacity: .8;
}

.lp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  font-size: 0.7188rem;
  font-weight: var(--font-weight-heavy);
  letter-spacing: .04em;
  color: var(--lp-teal);
  background: rgba(39, 194, 180, .12);
  border: 1px solid rgba(39, 194, 180, .3);
  padding: 0.3125rem 0.6875rem;
  border-radius: var(--radius-round);
}

.lp-badge--warn {
  color: var(--lp-gold);
  background: rgba(231, 185, 90, .13);
  border-color: rgba(231, 185, 90, .34);
}

.lp-card h2 {
  font-size: 1.4375rem;
  font-weight: 800;   /* 無對應 token，維持 800 */
  color: #fff;
  margin: 0.9375rem 0 0.3125rem;
}

.lp-card__head > p {
  font-size: 0.8125rem;
  color: var(--lp-ink-2);
  margin: 0 0 var(--space-22);
}

/* ── 登入卡內表單欄位 ───────────────────────────────────────── */
.lf-field {
  margin-bottom: var(--space-16);
}

.lf-field > label {
  display: block;
  font-size: 0.7813rem;
  font-weight: var(--font-weight-bold);
  color: var(--lp-ink-2);
  margin-bottom: 0.4375rem;
}

.lf-control {
  position: relative;
  display: flex;
  align-items: center;
}

.lf-control > i {
  position: absolute;
  left: 0.8125rem;
  color: rgba(39, 194, 180, .85);
  font-size: var(--icon-16);
  pointer-events: none;
}

.lf-control input {
  width: 100%;
  padding: 0.75rem 2.625rem 0.75rem 2.5rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 0.6875rem;
  font-size: var(--font-size-body-s);
  font-family: inherit;
  color: var(--lp-ink);
  background: rgba(255, 255, 255, .055);
  transition: var(--transition-fast);
}

.lf-control input::placeholder {
  color: rgba(169, 194, 214, .5);
}

.lf-control input:focus {
  outline: none;
  border-color: var(--lp-teal);
  background: rgba(255, 255, 255, .09);
  box-shadow: 0 0 0 3px rgba(39, 194, 180, .18);
}

.lf-eye {
  position: absolute;
  right: var(--space-8);
  background: none;
  border: none;
  color: var(--lp-ink-2);
  cursor: pointer;
  padding: 0.4375rem;
  font-size: 0.9375rem;
  line-height: 1;
}

.lf-eye:hover {
  color: var(--lp-ink);
}

/* 密碼「隱藏」狀態：在 lni-eye 上疊斜線（lineicons 4.0 無 eye-off glyph）。
   斜線為髮絲裝飾，幾何維持 px。 */
.lf-eye.is-off::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 19px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(-45deg);
  box-shadow: 0 -1.5px 0 rgba(9, 24, 44, .92);
}

.lf-hint {
  display: block;
  font-size: 0.6875rem;
  color: rgba(169, 194, 214, .65);
  margin-top: 0.4375rem;
}

/* ── 驗證碼列 ────────────────────────────────────────────────── */
.lf-captcha {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.lf-captcha__input {
  flex: 1 1 auto;
  min-width: 0;
}

/* 驗證碼僅 4–5 碼，輸入框不需與圖片同寬，右側不留眼睛鈕的位置 */
.lf-captcha__input input {
  padding-right: var(--space-14);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lf-captcha__img {
  flex: none;
  width: 7.25rem;
  height: 2.875rem;
  border-radius: 0.6875rem;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .055);
  cursor: pointer;
}

.lf-captcha__refresh {
  flex: none;
  width: 2.5rem;
  height: 2.875rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 0.6875rem;
  background: rgba(255, 255, 255, .055);
  color: var(--lp-ink-2);
  cursor: pointer;
  font-size: 1.0625rem;
  transition: var(--transition-fast);
}

.lf-captcha__refresh:hover {
  color: var(--lp-ink);
  border-color: var(--lp-teal);
  background: rgba(39, 194, 180, .12);
}

.lf-captcha__refresh:active i {
  transform: rotate(-90deg);
}

.lf-captcha__refresh i {
  transition: transform .25s;
}

.lf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--space-14) 0 var(--space-22);
}

.lf-remember {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.7813rem;
  color: var(--lp-ink-2);
  cursor: pointer;
}

.lf-remember input {
  accent-color: var(--lp-teal);
  width: 0.875rem;
  height: 0.875rem;
}

.lf-forgot {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.7813rem;
  color: var(--lp-teal);
  text-decoration: none;
}

.lf-forgot:hover {
  text-decoration: underline;
}

.lf-err {
  display: none;
  font-size: 0.7188rem;
  color: #ff9b91;
  margin-top: 0.4375rem;
}

.lf-err.is-show {
  display: block;
}

/* ── 主要動作按鈕（teal 漸層）──────────────────────────────── */
.lp-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: 0.8125rem;
  border: none;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: var(--font-weight-heavy);
  font-family: inherit;
  color: #04231f;
  border-radius: var(--radius-lg);
  letter-spacing: .04em;
  background: linear-gradient(135deg, #33d2c2, #0e9b92);
  box-shadow: 0 12px 30px rgba(39, 194, 180, .38), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: var(--transition-base);
}

.lp-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 38px rgba(39, 194, 180, .5), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.lp-submit:active {
  transform: translateY(0);
}

.lp-foot {
  text-align: center;
  font-size: 0.6875rem;
  color: rgba(169, 194, 214, .6);
  margin-top: var(--space-20);
  line-height: 1.7;
}

/* ── 忘記密碼／重設／結果／首次變更 共用 ─────────────────────── */
.auth-off {
  display: none !important;
}

.auth-wrap {
  position: relative;
  z-index: 2;
  width: min(27.75rem, 92vw);
  margin: auto;
  padding: var(--space-48) var(--space-20);
}

.auth-page .lp-card {
  padding: 2rem 1.875rem 1.625rem;
}

.auth-mark {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  margin-bottom: var(--space-18);
}

.auth-mark .lp-mark__ic {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.6875rem;
}

.auth-mark .lp-mark__ic img {
  width: var(--icon-24);
  height: var(--icon-24);
}

.auth-mark b {
  font-size: var(--font-size-body-s);
  font-weight: 800;   /* 無對應 token，維持 800 */
  color: #fff;
  letter-spacing: .02em;
}

/* 只套用到文字 span，排除 logo 徽章的 .lp-mark__ic（否則會把它從 grid 置中
   覆寫成 block，導致 logo 跑到徽章左上角、與底版錯開）*/
.auth-mark span:not(.lp-mark__ic) {
  display: block;
  font-size: 0.625rem;
  letter-spacing: .14em;
  color: var(--lp-ink-2);
  margin-top: var(--space-2);
}

.auth-page .lp-card > p {
  font-size: 0.8438rem;
  color: var(--lp-ink-2);
  line-height: 1.85;
  margin: 0.375rem 0 var(--space-22);
}

.auth-page .lp-card > p b {
  color: #cfe6f2;
}

/* 結果頁（成功／逾期）置中 */
.auth-page--result .lp-card {
  text-align: center;
}

.auth-page--result .lp-card > p {
  margin: 0.375rem 0 var(--space-24);
}

.auth-ic {
  width: 4.875rem;
  height: 4.875rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2.375rem;
  margin: var(--space-4) auto var(--space-18);
}

.auth-ic--ok {
  color: #5fe6d6;
  background: rgba(39, 194, 180, .14);
  box-shadow: 0 0 0 1px rgba(39, 194, 180, .3), 0 0 42px rgba(39, 194, 180, .24);
}

.auth-ic--warn {
  color: var(--lp-gold);
  background: rgba(231, 185, 90, .14);
  box-shadow: 0 0 0 1px rgba(231, 185, 90, .32), 0 0 42px rgba(231, 185, 90, .2);
}

/* ── 密碼規則檢核清單 ───────────────────────────────────────── */
.pw-rules {
  list-style: none;
  margin: var(--space-14) 0 var(--space-18);
  padding: var(--space-12) var(--space-14);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4375rem var(--space-10);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 0.6875rem;
}

.pw-rules li {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: var(--font-size-caption);
  color: var(--lp-ink-2);
}

.pw-rules li i {
  font-size: var(--icon-14);
  color: rgba(169, 194, 214, .45);
}

.pw-rules li.is-ok {
  color: #bdeee7;
}

.pw-rules li.is-ok i {
  color: var(--lp-teal);
}

/* ── 響應式 ──────────────────────────────────────────────────── */
@media (max-width: 940px) {
  .lp-inner {
    grid-template-columns: 1fr;
    gap: 1.875rem;
    width: min(27.5rem, 92vw);
  }
  /* 小螢幕：左側品牌願景面板直接隱藏，只保留右側登入卡 */
  .lp-brand {
    display: none;
  }
  .lp-map {
    width: 120%;
    left: -10%;
    opacity: .55;
  }
}

@media (max-width: 480px) {
  .lp-card {
    padding: 1.625rem 1.25rem 1.375rem;
  }
  .lp-title {
    font-size: 1.875rem;
  }
  .lp-feats {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-glow,
  .lp-node {
    animation: none !important;
  }
}

/* ── 忘記密碼跳窗（白底房規 modal 內，色彩改用全站 token）──────── */
.fm-state {
  text-align: center;
}

.fm-ic {
  width: 3.875rem;
  height: 3.875rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.875rem;
  margin: var(--space-4) auto var(--space-12);
}

.fm-ic--ok {
  color: var(--color-info);
  background: var(--color-info-soft);
}

.fm-ic--err {
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

.fm-state__title {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-heavy);
  color: var(--color-text-strong);
  margin: 0 0 var(--space-8);
}

.fm-state__desc {
  font-size: var(--font-size-body-s);
  color: var(--color-text-default);
  line-height: 1.75;
  margin: 0 0 var(--space-8);
}

.fm-state__hint {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

/* 忘記密碼跳窗內的 email 格式錯誤提示（白底改用深色 danger）*/
.fm-err {
  display: none;
  margin-top: var(--space-6);
  font-size: var(--font-size-caption);
  color: var(--color-text-danger);
}

.fm-err.is-show {
  display: block;
}