/* v304：登入／註冊頁改版（夥伴 mockup）
   這支檔案在 auth.css「之後」載入，只用 #auth-gate #auth-box … 的高優先權選擇器覆蓋樣式，
   不動 auth.css 本身，也不改任何元件 ID／class，所以 auth.js 的登入邏輯完全不受影響。 */
:root{
  --au-navy:#1a2a5a; --au-navy-d:#121c40; --au-gold:#e8b342; --au-gold-d:#d9a02c;
  --au-green:#4caf70; --au-card:#fcfaf6; --au-line:#e3e0d8; --au-text:#222b45; --au-mute:#6b7390;
}

/* ---------- 背景：深藍＋方格紋 ---------- */
#auth-gate{
  background-color:var(--au-navy-d) !important;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, #26397a 0%, transparent 65%) !important;
  background-size:40px 40px, 40px 40px, 100% 100% !important;
  overflow-y:auto;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
}

/* ---------- 卡片 ---------- */
#auth-gate #auth-box{
  width:min(92vw,520px) !important; max-width:520px !important; box-sizing:border-box;
  padding:0 !important; margin:24px auto !important;
  background:var(--au-card) !important; border:none !important; border-radius:22px !important;
  box-shadow:0 24px 70px rgba(0,0,0,.45) !important; overflow:hidden; text-align:left !important;
  color:var(--au-text);
}
#auth-gate .auth-hero{
  position:relative; padding:34px 28px 26px;
  background:linear-gradient(135deg,#243775 0%,#1a2a5a 55%,#141f47 100%);
}
#auth-gate .auth-brand{ display:flex; align-items:center; gap:16px; margin-top:6px; }
#auth-gate .auth-brand-logo{ height:58px; width:auto; border-radius:12px; display:block; flex:none; box-shadow:0 2px 10px rgba(0,0,0,.25); }
#auth-gate .auth-brand-text{ color:#fff; line-height:1.25; }
#auth-gate .auth-brand-name{ font-size:26px; font-weight:800; letter-spacing:.04em; }
#auth-gate .auth-brand-ai{ font-size:26px; font-weight:800; color:var(--au-gold); }
#auth-gate .auth-brand-sub{ font-size:15px; font-weight:700; letter-spacing:.05em; display:inline-block; }

/* 繁體 | 简体 膠囊切換（沿用原 #ui-lang-picker 與 .ui-lang-btn） */
#auth-gate #ui-lang-picker{
  position:absolute; top:12px; right:14px; display:inline-flex; gap:0; padding:3px !important; margin:0 !important; border:none !important; flex-wrap:nowrap;
  background:rgba(255,255,255,.12); border-radius:999px; align-items:center;
}
#auth-gate #ui-lang-picker .ui-lang-label{ display:none; }
#auth-gate #ui-lang-picker .ui-lang-btn{
  border:none !important; background:transparent !important; color:rgba(255,255,255,.75) !important;
  padding:5px 14px !important; border-radius:999px !important; font-size:14px !important; font-weight:600; cursor:pointer; box-shadow:none !important;
}
#auth-gate #ui-lang-picker .ui-lang-btn.active{ background:#fff !important; color:var(--au-navy) !important; font-weight:800; }

/* ---------- 內容 ---------- */
#auth-gate .auth-body{ padding:28px 28px 30px; }
#auth-gate #auth-box h1#auth-title{
  margin:0 0 10px !important; padding:0; font-size:27px !important; line-height:1.3; text-align:left !important;
  font-family:"Noto Serif TC","Songti TC","Source Han Serif TC","PMingLiU",serif; font-weight:900; color:var(--au-navy);
}
#auth-gate .auth-subtitle{ margin:0 0 18px; font-size:15px; line-height:1.7; color:var(--au-mute); }

#auth-gate .auth-benefits{
  list-style:none; margin:0 0 20px; padding:16px 18px; background:#eef6ee; border:1px solid #d8e9d8; border-radius:14px;
}
#auth-gate .auth-benefits li{ position:relative; padding:5px 0 5px 34px; font-size:15px; line-height:1.5; color:var(--au-text); }
#auth-gate .auth-benefits li::before{
  content:""; position:absolute; left:0; top:6px; width:22px; height:22px; border-radius:50%;
  background:var(--au-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/70% no-repeat;
}

/* 兩個分頁 */
#auth-gate .auth-tabs{ display:flex; gap:12px; margin:0 0 16px; padding:0; background:none; border:none; }
#auth-gate .auth-tabs .auth-tab{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px; height:56px; margin:0; padding:0 10px;
  font-size:17px; font-weight:800; border-radius:14px; cursor:pointer;
  background:#fff !important; color:var(--au-mute) !important; border:1.5px solid var(--au-line) !important; box-shadow:none !important;
}
#auth-gate .auth-tabs .auth-tab.active{ background:var(--au-navy) !important; color:#fff !important; border-color:var(--au-navy) !important; }
#auth-gate .auth-new-badge{
  display:inline-block; padding:2px 7px; font-size:12px; font-weight:900; letter-spacing:.05em; border-radius:6px;
  background:var(--au-gold); color:var(--au-navy);
}
#auth-gate .auth-tab:not(.active) .auth-new-badge{ display:none; }

/* Google / Microsoft */
#auth-gate .auth-oauth-btn{
  display:flex; align-items:center; justify-content:center; gap:12px; width:100%; height:56px; margin:0 0 12px;
  font-size:17px; font-weight:700; color:var(--au-text); background:#fff; border:1.5px solid var(--au-line); border-radius:14px; cursor:pointer;
}
#auth-gate .auth-oauth-btn:hover{ border-color:#c9c5b9; background:#fafafa; }
#auth-gate .auth-divider{ display:flex; align-items:center; gap:14px; margin:18px 0 6px; color:var(--au-mute); font-size:14px; }
#auth-gate .auth-divider::before,#auth-gate .auth-divider::after{ content:""; flex:1; height:1px; background:var(--au-line); }

/* 欄位 */
#auth-gate .auth-field-label{ display:block; margin:14px 0 8px; font-size:15px; font-weight:800; color:var(--au-mute); }
#auth-gate #auth-box input#auth-email,
#auth-gate #auth-box input#auth-password{
  display:block; width:100% !important; box-sizing:border-box; height:56px; margin:0 !important; padding:0 18px !important;
  font-size:18px; color:var(--au-text); background:#fff !important; border:1.5px solid var(--au-line) !important; border-radius:14px !important; outline:none;
}
#auth-gate #auth-box input#auth-email:focus,
#auth-gate #auth-box input#auth-password:focus{ border-color:var(--au-gold) !important; box-shadow:0 0 0 3px rgba(232,179,66,.25); }
#auth-gate #auth-box input::placeholder{ color:#a9afc2; }
#auth-gate #auth-box .auth-help{ margin:10px 0 18px !important; font-size:13.5px; line-height:1.6; color:var(--au-mute); text-align:left; background:none !important; border:none !important; padding:0 !important; }
#auth-gate .auth-msg{ margin:0 0 4px; font-size:14px; line-height:1.5; }
#auth-gate .auth-msg:empty{ display:none; }

/* 主按鈕：金色 */
#auth-gate #auth-box .auth-btn.auth-btn-primary{
  display:block; width:100%; height:62px; margin:0; font-size:19px; font-weight:900; letter-spacing:.04em; color:var(--au-navy) !important;
  background:var(--au-gold) !important; border:none !important; border-radius:16px !important; cursor:pointer;
  box-shadow:0 8px 20px rgba(232,179,66,.38);
}
#auth-gate #auth-box .auth-btn.auth-btn-primary:hover{ background:var(--au-gold-d) !important; }
#auth-gate #auth-box .auth-btn.auth-btn-primary:disabled{ opacity:.6; cursor:default; }
#auth-gate #auth-box .auth-btn:not(.auth-btn-primary){
  display:block; width:100%; height:50px; margin:10px 0 0; font-size:16px; font-weight:700; color:var(--au-text);
  background:#fff; border:1.5px solid var(--au-line); border-radius:14px; cursor:pointer;
}
#auth-gate .auth-free-note{ margin:14px 0 0; text-align:center; font-size:14.5px; color:var(--au-mute); }
#auth-gate .auth-link-btn{ display:block; margin:14px auto 0; background:none; border:none; font-size:15px; color:var(--au-navy); text-decoration:underline; cursor:pointer; }
#auth-gate #auth-box .auth-pricing-link{ display:block; margin:18px 0 0; text-align:center; font-size:14px; color:var(--au-mute); text-decoration:underline; }

/* 忘記密碼／付費牆／載入中面板：沿用同一套輸入框外觀 */
#auth-gate #auth-box #auth-forgot-panel input,
#auth-gate #auth-box #auth-resetpw-panel input{
  display:block; width:100%; box-sizing:border-box; height:52px; margin:0 0 12px; padding:0 16px; font-size:17px;
  background:#fff; border:1.5px solid var(--au-line); border-radius:14px; outline:none;
}
#auth-gate #auth-box #auth-loading-panel{ text-align:center; }
#auth-gate #auth-box #auth-paywall-panel p,#auth-gate #auth-box #auth-loading-panel p{ font-size:16px; line-height:1.7; color:var(--au-text); }
#auth-gate #auth-box #auth-forgot-panel .auth-btn.auth-btn-primary,
#auth-gate #auth-box #auth-resetpw-panel .auth-btn.auth-btn-primary,
#auth-gate #auth-box #auth-paywall-panel .auth-btn.auth-btn-primary{ height:56px; font-size:17px; }

/* 手機 */
@media (max-width:480px){
  #auth-gate #auth-box{ margin:12px auto !important; border-radius:18px !important; }
  #auth-gate .auth-hero{ padding:30px 18px 20px; }
  #auth-gate .auth-body{ padding:22px 18px 26px; }
  #auth-gate #auth-box h1#auth-title{ font-size:23px !important; }
  #auth-gate .auth-brand-name,#auth-gate .auth-brand-ai{ font-size:22px; }
  #auth-gate .auth-brand-sub{ display:block; font-size:14px; }
  #auth-gate .auth-tabs .auth-tab{ font-size:15px; height:52px; }
}

/* v305：免費試用提示 */
#auth-gate .auth-trial{ display:flex; gap:11px; align-items:flex-start; background:rgba(239,176,40,.12); border:1px solid rgba(239,176,40,.5); border-radius:12px; padding:12px 14px; margin:0 0 18px; }
#auth-gate .auth-trial-tag{ flex:none; background:#efb028; color:#3a2c05; font-weight:800; font-size:12px; letter-spacing:.5px; border-radius:6px; padding:3px 8px; line-height:1.3; margin-top:1px; white-space:nowrap; }
#auth-gate .auth-trial p{ margin:0; font-size:14px; line-height:1.6; color:#4a3c13; }
#auth-gate .auth-trial b{ color:#1b2340; font-weight:700; }