/* 登入中心畫面套松的登入稿外觀（松的 member-access.css 原樣載入在前面）。
   這裡只把共用元件（@faststep/ui 的 .os-field／.os-input／.os-btn）與登入中心局部元件（.au-*）換成松的色票與尺寸。
   色票來自 member-access.css 與松的狀態稿：深藍 #07131F、面板 #0C2232、金 #C9AA70、文字 #F5F7F8；
   錯誤 字 #842E27／底 #FFF3F1／框 #AD4238。 */

/* 標題：松稿用 h2，這裡為了頁面有 h1 用 h1，樣式跟他的 .member-panel h2 一樣 */
.member-login-centered .member-panel h1.member-panel-title { font-size: 30px; margin: 9px 0; line-height: 1.4; color: #f5f7f8; font-weight: 700; }
@media (max-width: 600px) { .member-login-centered .member-panel h1.member-panel-title { font-size: 28px; } }
.member-panel > p { font-size: 13px; color: #b9cbd5; line-height: 1.9; }
.member-login-centered > main { align-items: flex-start; }
.member-panel .os-muted { color: #a8bdc9; }
.member-panel a { color: #87d9ce; }
.member-panel .access-tabs a { color: #a8bdc9; }
.member-panel .access-tabs a[aria-current='page'] { color: #ecd4a4; }

/* 欄位 */
.member-panel .os-field { display: block; margin: 0 0 18px; }
.member-panel .os-field__label { display: block; font-size: 13px; font-weight: 400; color: #d9e3e8; }
.member-panel .os-field__required { color: #ecd4a4; }
.member-panel .os-field__hint { font-size: 12px; color: #a8bdc9; margin-top: 6px; }
.member-panel .os-input { display: block; margin-top: 8px; width: 100%; min-height: 46px; border: 1px solid #3b505d; border-radius: 7px; background: #0b1a26; color: #f5f7f8; padding: 12px; font: 13px system-ui; box-sizing: border-box; }
.member-panel .os-input:focus-visible { outline: 2px solid #87d9ce; outline-offset: 2px; }
.member-panel .os-input[aria-invalid='true'] { border-color: #ad4238; }
.member-panel .os-field__error, .member-panel .au-notice--error { margin: 8px 0 0; padding: 8px 12px; color: #842e27; background: #fff3f1; border: 1px solid #ad4238; border-left-width: 3px; border-radius: 6px; font-size: 13px; line-height: 1.7; }
.member-panel .os-field__error a, .member-panel .au-notice--error a { color: #842e27; text-decoration: underline; }
.member-panel .os-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: #d9e3e8; }
.member-panel .os-check input { width: 18px; min-height: 18px; margin: 2px 0 0; flex: none; accent-color: #c9aa70; }

/* 提示 */
.member-panel .au-notice { margin: 0 0 16px; padding: 10px 14px; border: 1px solid #304550; border-left: 2px solid #c9aa70; border-radius: 6px; background: #c9aa7010; color: #e0d0ad; font-size: 13px; line-height: 1.8; }
.member-panel .au-mock { border-style: dashed; }

/* 按鈕 */
.member-panel .os-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 47px; padding: 0 18px; border-radius: 7px; border: 1px solid #3b505d; background: transparent; color: #f5f7f8; font: inherit; font-size: 14px; cursor: pointer; text-decoration: none; }
.member-panel .os-btn--block { width: 100%; }
.member-panel .os-btn--primary { background: #c9aa70; border-color: #c9aa70; color: #14283b; font-weight: 700; }
.member-panel .os-btn--primary:hover:not(:disabled) { background: #d6ba84; }
.member-panel .os-btn--secondary:hover:not(:disabled) { background: #ffffff0d; }
.member-panel .os-btn:disabled, .member-panel .os-btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; }
.member-panel .os-btn:focus-visible { outline: 2px solid #87d9ce; outline-offset: 3px; }

/* 第三方登入：松的順序是 LINE（深綠）在上、Google（白底）在下 */
.member-panel .au-providers { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.member-panel .au-providers .os-btn:nth-child(1) { order: 2; background: #fff; border-color: #d7e0e6; color: #213844; }
.member-panel .au-providers .os-btn:nth-child(1):hover:not(:disabled) { background: #edf3f7; }
.member-panel .au-providers .os-btn:nth-child(1)::before { content: ''; width: 20px; height: 20px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%234285F4' d='M43.6 24.5c0-1.4-.1-2.8-.4-4.1H24v7.8h11a9.4 9.4 0 0 1-4.1 6.2v5h6.6c3.8-3.5 6.1-8.7 6.1-14.9z'/%3E%3Cpath fill='%2334A853' d='M24 44c5.5 0 10.1-1.8 13.5-4.9l-6.6-5c-1.8 1.2-4 1.9-6.9 1.9-5.3 0-9.8-3.6-11.4-8.4H5.8v5.2A20.4 20.4 0 0 0 24 44z'/%3E%3Cpath fill='%23FBBC05' d='M12.6 27.6a12 12 0 0 1 0-7.2v-5.2H5.8a20 20 0 0 0 0 17.6z'/%3E%3Cpath fill='%23EA4335' d='M24 12c3 0 5.7 1 7.8 3l5.9-5.9A19.6 19.6 0 0 0 24 4 20.4 20.4 0 0 0 5.8 15.2l6.8 5.2C14.2 15.6 18.7 12 24 12z'/%3E%3C/svg%3E") center / contain no-repeat; }
.member-panel .au-providers .os-btn:nth-child(2) { order: 1; background: #173a2b; border-color: #3a6250; color: #a8cabb; }

/* 分隔線（松的 .access-divider） */
.member-panel .au-divider { display: flex; align-items: center; gap: 12px; color: #a8bdc9; font-size: 11px; margin: 20px 0; }
.member-panel .au-divider::before, .member-panel .au-divider::after { content: ''; height: 1px; background: #304550; flex: 1; border: 0; }
.member-panel .au-links { margin-top: 12px; font-size: 13px; }
.member-panel .au-links a { color: #c9aa70; }

/* 驗證碼、備用碼、卡片 */
.member-panel .au-code { letter-spacing: 0.4em; font-size: 22px; text-align: center; }
.member-panel .au-codes li, .member-panel .au-secret { border-color: #3b505d; color: #f5f7f8; border-radius: 7px; }
.member-panel .au-cards button { text-align: left; }

.member-login-centered > main { padding-bottom: 55px; }