:root{
  --bg:#0b1020;
  --card:#0f1524;
  --muted:#9fb5d1;
  --text:#e9f0ff;
  --accent:#7a4cff;
  --border:rgba(255,255,255,.12);
  --btn:linear-gradient(90deg,#6b7bff,#64c6ff);
  --line:#17c142;
}

html,body{height:100%; background:#0a0f1d; color:var(--text);}

#bg-stars{
  position:fixed; inset:0; z-index:0; display:block;
}

/* 主要舞台置中 */
.page{ position:relative; z-index:1; }
.stage{
  max-width:1100px;
  margin:120px auto 140px;
  padding:0 16px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap:24px;
}

/* 合併卡片（上介紹 / 下表單） */
.panel-combined{
  grid-column:1/2;
  display:grid;
  grid-template-rows:auto auto;
  gap:18px;
}

/* 卡片基底 */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:24px 22px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}

/* 介紹區 */
.intro .title{
  font-size:36px; margin:0 0 6px;
  letter-spacing:.5px; color:#c07fff;
}
.intro .lead{ line-height:1.8; color:var(--muted); }

/* 表單卡 */
.auth{ position:relative; z-index:3; }

/* 分隔線 */
.divider{
  display:flex; align-items:center; justify-content:center;
  gap:12px; margin:10px 0 8px; color:var(--muted);
}
.divider::before,.divider::after{
  content:""; height:1px; background:var(--border); flex:1;
}

/* 行為元件 */
.form{ display:none; }
.form.is-active{ display:block; }

.row{ display:flex; gap:12px; }
.row-2 .country{ flex:0 0 clamp(120px,24vw,160px); }
.row-2 .field{ flex:1 1 auto; }

.field{
  display:block; position:relative; margin:10px 0;
}
.field input{
  width:100%; height:44px; border-radius:10px;
  background:#0b1221; color:var(--text);
  border:1px solid var(--border);
  padding:0 12px; outline:none;
}
.field input::placeholder{ color:#7f93b1; }

.with-icon input{ padding-right:40px; }


/* 國碼選擇（Trigger） */
.country{ position:relative; }
.country-trigger{
  width:100%; height:44px; border-radius:10px; border:1px solid var(--border);
  background:#0b1221; color:var(--text);
  display:flex; align-items:center; gap:8px; padding:0 10px; cursor:pointer;
}
.country .flag{ width:18px; height:18px; border-radius:50%; }
.country .dial{ font-weight:600; }

/* 按鈕 */
.btn{
  width:100%; height:44px; border-radius:12px; border:none; cursor:pointer;
  font-weight:700; color:#09111e; background:var(--btn);
}
.btn.primary{ color:#09111e; }
.btn.ghost{ background:transparent; border:1px solid var(--border); color:var(--text); width:auto; padding:0 14px;}
.btn.line{ background:var(--line); color:#07110d; display:flex; align-items:center; justify-content:center; gap:10px; }
.btn.line img{ width:22px; height:22px; display:block; }

.form-links{
  margin-top:8px; display:flex; justify-content:space-between;
}
.link{ background:none; border:none; color:#a9c2ff; cursor:pointer; }

/* 右側廣告容器保持（來自 style.css），此處僅確保在主欄外 */
.ads-right{ grid-column:2/3; }

/* Portal：國碼清單（永遠在最上面） */
#country-portal{ position:fixed; inset:0; z-index:99999; pointer-events:none; }
#country-portal .country-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.15); opacity:0; transition:.15s;
}
#country-portal.open{ pointer-events:auto; }
#country-portal.open .country-backdrop{ opacity:1; }

.country-popover{
  position:fixed; left:0; top:0; width:260px;
  max-height:260px; overflow:auto; display:none;
  background:#0f1522; border:1px solid var(--border); border-radius:12px; padding:6px;
  box-shadow:0 14px 30px rgba(0,0,0,.45);
}
#country-portal.open .country-popover{ display:block; }
.country-item{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:10px; cursor:pointer; color:var(--text);
}
.country-item:hover{ background:#121a2c; }
.country-item .flag{ width:18px; height:18px; border-radius:50%; }
.country-item .name{ flex:1; color:#b8c9e6; font-size:14px; }
.country-item .code{ color:#86a3cc; font-size:13px; }

/* RWD 簡調 */
@media (max-width: 980px){
  .stage{ grid-template-columns:1fr; gap:16px; margin:100px auto 120px; }
  .ads-right{ grid-column:1/2; order:3; margin-top:8px; }
}


/* ===== Header dropdown：定位 + z-index，避免被擋 ===== */
.header-banner .dropdown { position: relative; }
.header-banner .dropdown-toggle { cursor: pointer; }
.header-banner .dropdown-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #0f1524;
  display: none;
  z-index: 100001; /* 高於任何廣告或畫布 */
}
.header-banner .dropdown-menu.show{ display:block; }

/* ===== Footer：確保永遠在畫面上層、可見 ===== */
footer{ position: relative; z-index: 5; }
.footer-banner{ pointer-events: none; } /* 不擋互動 */

/* ===== 國碼 + 手機：同一行、等高、垂直置中 ===== */
.row-2{
  display: flex;
  gap: 12px;
  align-items: center;           /* 讓兩個欄位垂直對齊 */
  flex-wrap: nowrap;
}
.row-2 .country{ flex: 0 0 clamp(120px, 22vw, 150px); }
.row-2 .field{ flex: 1 1 auto; }

/* 統一高度 */
.country-trigger,
.field input{
  height: 48px;
  border-radius: 10px;
}

/* 眼睛按鈕跟著高度置中 */
.field.with-icon input{ padding-right: 44px; }
.field .eye{
  position:absolute; right:8px; top:50%; transform: translateY(-50%);
  width:28px; height:28px; border-radius:8px; border:1px solid var(--border);
  background:#0b1221; color:#9fb5d1; display:grid; place-items:center; cursor:pointer;
}

/* 眼睛圖示切換（已在 JS 控制 .on 狀態） */
.field .eye .icon-eye-off{ display:none; }
.field .eye.on .icon-eye{ display:none; }
.field .eye.on .icon-eye-off{ display:block; }




/* 讓 user-actions 用絕對定位、可單獨上下左右微調 */
.user-actions{
  position: absolute;
  top: var(--ua-top, 12px);    /* 想再往下就加大數字；往上就減小 */
  right: var(--ua-right, 24px);
  z-index: 100010;             /* 確保蓋過星空/廣告 */
  display: flex;
  align-items: center;
}

/* （可選）下拉按鈕大小，如果需要一起放大按鈕的點擊區 */
.header-banner .user-actions .dropdown-toggle{
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* 手機寬度時，另外給一組位置（依需要調整數字） */
@media (max-width: 768px){
  .header-banner .user-actions{
    top: var(--ua-top-sp, 12px);
    right: var(--ua-right-sp, 12px);
  }
}


/* 右上角 user-actions 的絕對位置（可自由調） */
.user-actions{
  position: absolute;
  top: var(--ua-top, 14px);
  right: var(--ua-right, 18px);
  z-index: 1001;
  pointer-events: auto;
}

/* 下拉選單本體：預設隱藏，打開時 .show 顯示 */
.user-actions .dropdown { position: relative; }
.user-actions .dropdown-toggle{ cursor: pointer; }
.user-actions .dropdown-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 150px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #0f1524;
  display: none;
  z-index: 1002; /* 高於 header 自身 */
}
.user-actions .dropdown-menu.show{ display:block; }



/* ===== Combined Panel：拉大與下方的空白 ===== */
:root{
  --panel-bottom-gap: clamp(28px, 4vh, 72px); /* 依需要改 */
  --panel-row-gap: 24px;                      /* 上介紹 / 下表單 之間的距離 */
}

.panel-combined{
  margin-bottom: var(--panel-bottom-gap);
  row-gap: var(--panel-row-gap); /* 等同 gap，但只影響上下兩列 */
}

/* 如果你只想讓「登入卡片」內部更喘一點（最下面文字不會貼邊） */
.auth.card{
  padding-bottom: 32px; /* 原本 24px，再多給一點空白 */
}


/* 隱藏頁面卷軸，但仍可上下捲動 */
html { overflow: hidden; }              /* 避免出現雙卷軸 */
body{
  height: 100%;
  overflow-y: auto;                     /* 仍然可滾動 */
  -ms-overflow-style: none;             /* IE/Edge */
  scrollbar-width: none;                /* Firefox */
}
body::-webkit-scrollbar{                /* Chrome/Safari/Chromium */
  width: 0;
  height: 0;
}


/* 登入按鈕 loading 狀態 */
.btn.is-loading{
  position: relative;
  pointer-events: none;
  opacity: .8;
}
.btn.is-loading::after{
  content:"";
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  animation: spin .8s linear infinite;
}
@keyframes spin{ to{ transform: translateY(-50%) rotate(360deg);} }


/* 登入按鈕在 loading 時可視化（可選） */
.btn.is-loading{
  position: relative;
  pointer-events: none;
  opacity: .8;
}
.btn.is-loading::after{
  content:"";
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  animation: spin .8s linear infinite;
}

/* 按鈕被鎖時的視覺（也支援 disabled 屬性） */
.btn:disabled,
.btn.is-disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(100%);
}

/* 全頁 Loading 覆蓋層 */
#page-loading{
  position: fixed; inset: 0;
  background: rgba(6, 10, 20, .55);
  display: none;                /* 用 .show 切換 */
  z-index: 100000;              /* 蓋過所有元素（你的 portal 是 99999） */
  align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
#page-loading.show{ display: flex; }

.page-loading-box{
  display:flex; flex-direction:column; align-items:center;
  padding: 18px 22px; border-radius: 14px;
  background: rgba(10, 16, 29, .85);
  border: 1px solid var(--border);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.page-loading-box .spinner{
  width: 56px; height: 56px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,.18);
  border-top-color: #7ab8ff;
  animation: spin .8s linear infinite;
}
.page-loading-box p{
  margin-top: 10px; font-size: 14px; color: var(--muted);
}

@keyframes spin { to{ transform: rotate(360deg); } }

/* 送出時的按鈕 Spinner */
.btn.is-loading{
  position: relative;
  pointer-events: none;
  opacity: .85;
}
.btn.is-loading::after{
  content: "";
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  animation: spin .8s linear infinite;
}

@keyframes spin{
  to { transform: translateY(-50%) rotate(360deg); }
}


/* --- Fullscreen transparent loading overlay --- */
/* ① 移除按鈕內的 loading 圈圈（保留禁用狀態） */
.btn.is-loading{ pointer-events: none; }      /* 按鈕不可點即可 */
.btn.is-loading::after{ content: none !important; }  /* 不畫圈圈 */
 /* 如果不想變暗，就順手關掉透明度：
.btn.is-loading{ opacity: 1 !important; }
*/

/* ② 全頁 Loading：置中顯示 + 柔和色調背景（可調） */
#global-loading[hidden]{ display:none !important; }

:root{
  /* 想改色調只要改這兩個數值 */
  --gl-bg-alpha: .55;            /* 背景透明度 0~1 */
  --gl-blur: 2px;                /* 背景微模糊 */
}

#global-loading{
  position: fixed; inset: 0;
  z-index: 100005;
  display: grid; place-items: center;
  pointer-events: auto;                 /* 擋住所有操作 */
  background:
    radial-gradient(60% 60% at 50% 40%,
      rgba(48,105,200, .18) 0%,         /* 中心一點藍紫暈染 */
      rgba(8,12,22, var(--gl-bg-alpha)) 60%,
      rgba(3,6,12, calc(var(--gl-bg-alpha) + .1)) 100%
    );
  backdrop-filter: blur(var(--gl-blur));
}

#global-loading .loading-box{ pointer-events: none; }  /* 圈圈不吃點擊 */
#global-loading .spinner{
  width: 60px; height: 60px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  animation: glspin .8s linear infinite;
}

@keyframes glspin { to { transform: rotate(360deg); } }

/* 錯誤/提示訊息（顯示在密碼與按鈕之間） */
.form-msg{
  min-height: 20px;
  margin: 6px 2px 10px;
  font-size: 14px;
  line-height: 1.4;
  color: #ff6b7a;           /* 錯誤：粉紅紅 */
  transition: .15s ease;
}
.form-msg.ok{ color: #35d49c; } /* 成功：綠色 */

/* 全頁 Loader（透明背景、置中、會鎖住互動） */
#page-loading{
  position: fixed; inset: 0;
  display: none;                     /* 以 .show 切換 */
  align-items: center; justify-content: center;
  z-index: 100000;                   /* 蓋過所有元素 */
  background: transparent;           /* ✅ 透明 */
  pointer-events: auto;              /* ✅ 擋互動 */
}
#page-loading.show{ display: flex; }
#page-loading .spinner{
  width: 64px; height: 64px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,.25);
  border-top-color: #7ab8ff;
  animation: pl-spin .9s linear infinite;
}
@keyframes pl-spin { to { transform: rotate(360deg); } }

/* 顯示 Loader 時鎖住頁面卷動 */
body.is-loading{ overflow: hidden; }


#page-loading{
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  z-index: 100000;
  background: transparent;
  pointer-events: none;
}
#page-loading.show{
  display: flex;
  pointer-events: auto;
}
#page-loading .spinner{
  width: 64px; height: 64px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,.25);
  border-top-color: #7ab8ff;
  animation: pl-spin .9s linear infinite;
}
@keyframes pl-spin{ to { transform: rotate(360deg); } }
#bg-stars{ pointer-events: none; }