/* KM 文件清洗平台 —— 登入前的深色頁面樣式（登入頁／使用模式選擇頁）。
*
* F97（2026-08-28）：原本內嵌在 `app.routers.admin._LOGIN_PAGE` /
* `_MODE_PAGE` 的 Python 字串裡，抽成獨立檔案由 StaticFiles 服務
* （`/static/auth.css`）。兩頁的 各帶 `auth-page` ＋
* （`auth-login` / `auth-mode`）class 做區隔——共通規則掛在
* `.auth-page`，只差在卡片寬度與模式選項的少數規則各自覆寫。
*
* token 沿用 `app.css` 定義不了（不同 、不同頁面），這裡自帶
* 一份深色情境用的區域 token。
*
* F98（2026-08-28）：套用自架字型（見 `fonts.css`，本頁也 進來）、
* 補聚焦環與過場，卡片陰影加深一層。深色配色語言不變。
* 登入後的淺色外殼樣式在 `app.css`，兩邊選擇器不共用。
*/
:root {
--auth-bg: #0f172a;
--auth-text: #f1f5f9;
--auth-text-muted: #94a3b8;
--auth-text-label: #cbd5e1;
--auth-card-bg: #1e293b;
--auth-border: #334155;
--auth-focus: #2dd4bf;
--auth-accent: #0d9488;
--auth-accent-hover: #0f766e;
--auth-error-bg: rgba(248, 113, 113, 0.12);
--auth-error-border: #f87171;
--auth-error-text: #fca5a5;
--auth-radius: 8px;
--auth-radius-lg: 12px;
--auth-ease: 140ms ease;
--auth-font: 'Inter', 'Noto Sans TC', -apple-system, 'Segoe UI',
'PingFang TC', 'Microsoft JhengHei', 'Microsoft YaHei', Arial, sans-serif;
}
* { box-sizing: border-box; }
.auth-page {
margin: 0; min-height: 100vh; display: flex;
align-items: center; justify-content: center;
background-color: var(--auth-bg); color: var(--auth-text);
font-family: var(--auth-font);
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* 登入頁的 是縱向 flex column（品牌區在卡片上方、都水平置中）；
模式選擇頁的品牌區與卡片包在一層 裡， 只負責置中。 */
.auth-login { flex-direction: column; padding: 24px; }
.auth-page .brand { text-align: center; margin-bottom: 28px; }
.auth-page .brand h1 { font-size: 26px; font-weight: 700; margin: 0 0 8px; color: var(--auth-text); }
.auth-page .brand p { font-size: 14px; color: var(--auth-text-muted); margin: 0; }
.auth-page .brand h1 { letter-spacing: -0.01em; }
.auth-page .card {
max-width: 100%; background-color: var(--auth-card-bg); border: 1px solid var(--auth-border);
border-radius: var(--auth-radius-lg); padding: 32px;
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.3);
}
.auth-login .card { width: 360px; }
.auth-mode .card { width: 420px; }
.auth-page .card h2 { font-size: 20px; margin: 0 0 4px; color: var(--auth-text); }
.auth-page .card .hint { font-size: 13px; color: var(--auth-text-muted); margin: 0 0 24px; }
.auth-page .error {
background-color: var(--auth-error-bg); border: 1px solid var(--auth-error-border); color: var(--auth-error-text);
padding: 10px 14px; border-radius: var(--auth-radius); font-size: 13px; margin-bottom: 16px;
}
/* ---- 登入頁專屬 ---- */
.auth-login label { display: block; font-size: 13px; color: var(--auth-text-label); margin-bottom: 6px; }
.auth-login input {
width: 100%; background-color: var(--auth-bg); border: 1px solid var(--auth-border); border-radius: var(--auth-radius);
padding: 10px 12px; color: var(--auth-text); font-size: 14px; margin-bottom: 20px;
font-family: inherit; transition: border-color var(--auth-ease), box-shadow var(--auth-ease);
}
.auth-login input:focus {
outline: none; border-color: var(--auth-focus);
box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.25);
}
/* ---- 登入頁：OIDC（用 tyn-volunteer 帳號登入）入口（F102）---- */
.auth-login .oidc-login {
display: block; width: 100%; text-align: center; text-decoration: none;
background-color: var(--auth-accent); color: #ffffff; border-radius: var(--auth-radius);
padding: 12px; font-size: 15px; font-weight: 600; margin-bottom: 8px;
transition: background-color var(--auth-ease), transform var(--auth-ease);
}
.auth-login .oidc-login:hover { background-color: var(--auth-accent-hover); }
.auth-login .oidc-login:active { transform: translateY(1px); }
.auth-login .oidc-login:focus-visible { outline: 2px solid var(--auth-focus); outline-offset: 2px; }
.auth-login .divider {
display: flex; align-items: center; gap: 12px;
color: var(--auth-text-muted); font-size: 12px; margin: 18px 0;
}
.auth-login .divider::before, .auth-login .divider::after {
content: ''; flex: 1; height: 1px; background-color: var(--auth-border);
}
/* ---- 模式選擇頁專屬 ---- */
.auth-mode .mode-option {
display: block; border: 1px solid var(--auth-border); border-radius: var(--auth-radius); padding: 14px 16px;
margin-bottom: 12px; cursor: pointer;
transition: border-color var(--auth-ease), background-color var(--auth-ease);
}
.auth-mode .mode-option:hover { border-color: var(--auth-focus); background-color: rgba(45, 212, 191, 0.06); }
.auth-mode .mode-option input { margin-right: 10px; }
.auth-mode .mode-option .title { font-size: 14px; font-weight: 600; color: var(--auth-text); }
.auth-mode .mode-option .desc { font-size: 12px; color: var(--auth-text-muted); margin: 4px 0 0 24px; }
/* ---- 兩頁共用的送出鈕（模式頁多一個 margin-top）---- */
.auth-page button[type='submit'] {
width: 100%; background-color: var(--auth-accent); color: #ffffff; border: none; border-radius: var(--auth-radius);
padding: 12px; font-size: 15px; font-weight: 600; cursor: pointer;
font-family: inherit; transition: background-color var(--auth-ease), transform var(--auth-ease);
}
.auth-page button[type='submit']:hover { background-color: var(--auth-accent-hover); }
.auth-page button[type='submit']:active { transform: translateY(1px); }
.auth-page button[type='submit']:focus-visible { outline: 2px solid var(--auth-focus); outline-offset: 2px; }
.auth-mode button[type='submit'] { margin-top: 8px; }