/* ============================================================
EC中医查询系统 · 登录页样式（LiPuLife 米白 + 深色）
交付：艾高飞马(hp) → 服务端登录骨架：斯家马
日期：2026-09-10 版本：v3（v2 核心不变 + v1.2 新增元素 + 兼容段）
------------------------------------------------------------
为什么要 v3（2026-09-10 与斯家马对签后定）：
v1.2 的登录页是「内联样式 + 另一套类名」，且登出确认页的样式
写在 app.py 的 LOGOUT_TPL 里 —— 样式散落在两处、改一次要动代码。
本版把设计收成**唯一来源**：/login.css 一份文件管登录页 + 登出页，
换样式不碰代码（斯家马方案 (a)）。
------------------------------------------------------------
三段结构（用哪段看你的接法）：
【A 核心】A. 我方类名 —— 正式骨架（推荐），v2 原文未改
【B 新增】B. 新增元素 —— login-notice / login-remember / login-cancel
【C 兼容】C. v1.2 类名别名 —— 可整段删除；留着=不改 HTML 也不跑版
------------------------------------------------------------
⚠️ 接线提醒（CSS 之外的两步，缺一不可，见同群消息）：
① nginx 要给登录页资源开豁免：登录页是「未登录」状态打开的，
而静态正则 location 继承 server 级 auth_request → 直接外链
/login.css 会被 302 到登录页（浏览器拿到 HTML 当 CSS = 无样式）。
原型版就是这么做的，照抄即可：
location = /login.css { auth_request off;
proxy_pass http://127.0.0.1:5002/login.css; }
② app.py 加 /login.css 路由，每次请求现读 static/login.css（不用重启）：
with open(os.path.join(BASE,"static","login.css"),encoding="utf-8") as f:
css = f.read()
------------------------------------------------------------
配色来源：Echo 2026-09-10 发的 LiPuLife 截图，与本项目 v25 全站
同一套值（米白 #faf8f3 / 深色 #1f1f1f / 细边框 #e8e4dc /
12px 圆角 / 扁平无阴影无渐变）。登录页→主站视觉连贯。
变量名沿用骨架自带的 --bg --fg --muted --card --border
--accent --accent-fg --danger --radius，方便后续统一调整。
============================================================ */
/* ============================ A. 核心 ============================ */
:root {
--bg: #faf8f3; /* 页面米白底 */
--fg: #1f1f1f; /* 主文字 / 深色 */
--muted: #86868b; /* 次要文字 */
--card: #ffffff; /* 卡片底 */
--border: #e8e4dc; /* 卡片描边（暖浅灰） */
--line: #d8d4cc; /* 输入框描边 */
--accent: #1f1f1f; /* 按钮深色（同 v25 导航/按钮） */
--accent-hover: #3a3a3a;
--accent-fg: #ffffff;
--danger: #c62828; /* 错误提示（用 v25 功能色） */
--notice: #8a6d3b; /* 提示条文字（沿用 v1.2 琥珀色） */
--notice-bg: #fdf6e3;
--notice-line: #f0e2c0;
--radius: 12px; /* 卡片圆角 */
--radius-ctrl: 8px; /* 输入框/按钮圆角 */
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: var(--bg);
color: var(--fg);
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
"Segoe UI", "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
}
/* ---------------- 卡片 ---------------- */
.login-card {
width: 100%;
max-width: 380px;
background: var(--card);
border: 1px solid var(--border); /* 扁平细边框，无阴影 */
border-radius: var(--radius);
padding: 40px 36px 28px;
}
.login-title {
margin: 0 0 6px;
font-size: 22px;
font-weight: 700;
letter-spacing: .5px;
color: var(--fg);
}
.login-subtitle {
margin: 0 0 24px;
font-size: 13px;
color: var(--muted);
}
/* ---------------- 提示 ---------------- */
.login-error {
margin: 0 0 16px;
padding: 10px 12px;
font-size: 13px;
line-height: 1.5;
color: var(--danger);
background: rgba(198, 40, 40, .06);
border: 1px solid rgba(198, 40, 40, .20);
border-radius: var(--radius-ctrl);
}
/* 万一模板会输出空节点，也不留一块空盒子 */
.login-error:empty {
margin: 0;
padding: 0;
border: 0;
background: none;
}
/* ---------------- 表单 ---------------- */
.login-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.field {
display: flex;
flex-direction: column;
gap: 6px;
}
.field-label {
font-size: 13px;
font-weight: 600;
color: #666666;
}
.field-input {
width: 100%;
padding: 11px 13px;
font-size: 14px;
font-family: inherit;
color: var(--fg);
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius-ctrl);
outline: none;
transition: border-color .15s;
}
.field-input::placeholder { color: #b0aea9; }
.field-input:focus { border-color: var(--accent); } /* 聚焦用深色，不用蓝 */
.field-input:disabled { background: #f5f2ec; color: var(--muted); }
/* Chrome/Edge 自动填充的黄色底会破坏米白配色，压掉 */
.field-input:-webkit-autofill,
.field-input:-webkit-autofill:hover,
.field-input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px var(--card) inset;
-webkit-text-fill-color: var(--fg);
transition: background-color 9999s ease-out;
}
.login-button {
width: 100%;
margin-top: 4px;
padding: 13px 16px;
font-size: 15px;
font-weight: 600;
font-family: inherit;
letter-spacing: 2px;
color: var(--accent-fg);
background: var(--accent); /* 深色按钮 */
border: none;
border-radius: var(--radius-ctrl);
cursor: pointer;
transition: background .15s;
}
.login-button:hover { background: var(--accent-hover); }
.login-button:active { background: #000000; }
.login-button:disabled { background: #8a8a8a; cursor: default; }
/* ---------------- 页脚 ---------------- */
.login-foot {
margin: 24px 0 0;
text-align: center;
font-size: 11px;
line-height: 1.7;
color: #b0aea9;
}
/* ==================== B. 新增元素（v1.2 需要） ==================== */
/* B1. 提示条 {{NOTICE}}：放字段上方。
现有触发场景：会话过期后跳回登录页、账号被停用等「中性/提示」信息。
结构建议：…
（无提示时干脆不输出该节点） */
.login-notice {
margin: 0 0 16px;
padding: 10px 14px;
font-size: 12px;
line-height: 1.6;
text-align: center;
color: var(--notice);
background: var(--notice-bg);
border: 1px solid var(--notice-line);
border-radius: var(--radius-ctrl);
}
.login-notice:empty { display: none; }
/* 需要「偏严重」语气时加 is-error：…
*/
.login-notice.is-error {
color: var(--danger);
background: rgba(198, 40, 40, .06);
border-color: rgba(198, 40, 40, .20);
}
/* B2. 「记住我」一行（v1.2 的 .login-row）。
会话时长若定 7 天 + 记住我 30 天，这一行保留；若定「一律 30 天平放」，
整行删掉即可，本段不影响其它元素。
结构： */
.login-remember {
display: flex;
align-items: center;
gap: 8px;
margin: -4px 0 0;
font-size: 13px;
color: #666666;
cursor: pointer;
user-select: none;
}
.login-remember input[type="checkbox"] {
flex: 0 0 auto;
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--accent); /* 深色勾选，与按钮同色 */
cursor: pointer;
}
.login-remember span { line-height: 1.4; }
/* B3. 登出确认页「取消，继续使用」（app.py 的 LOGOUT_TPL 里那个链接）。
结构：取消，继续使用 */
.login-cancel {
display: block;
margin-top: 16px;
text-align: center;
font-size: 13px;
color: var(--muted);
text-decoration: none;
}
.login-cancel:hover { color: var(--fg); }
/* ========== C. v1.2 现用类名别名（可整段删除） ==========
留着的作用：万一某一处 HTML 没改到（或你想先换 CSS 再改 HTML），
页面也不会跑版。类名与我方命名一一对应：
login-box→login-card login-brand→login-title login-sub→login-subtitle
login-field→field(含 label/input) login-row→login-remember
login-btn→login-button login-err→login-error
另外 #loginOverlay（v1.2 的 fixed 居中层）保留原行为，不用改。 */
#loginOverlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: var(--bg);
}
.login-box { width: 100%; max-width: 380px; background: var(--card);
border: 1px solid var(--border); border-radius: var(--radius);
padding: 40px 36px 28px; }
.login-brand { margin: 0 0 6px; font-size: 22px; font-weight: 700;
letter-spacing: .5px; color: var(--fg); }
.login-sub { margin: 0 0 24px; font-size: 13px; color: var(--muted); }
.login-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.login-field label { font-size: 13px; font-weight: 600; color: #666666; }
.login-field input { width: 100%; padding: 11px 13px; font-size: 14px;
font-family: inherit; color: var(--fg); background: var(--card);
border: 1px solid var(--line); border-radius: var(--radius-ctrl);
outline: none; transition: border-color .15s; }
.login-field input:focus { border-color: var(--accent); }
.login-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 18px;
font-size: 13px; color: #666666; }
.login-row input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px;
margin: 0; accent-color: var(--accent); }
.login-btn { width: 100%; padding: 13px 16px; font-size: 15px; font-weight: 600;
font-family: inherit; letter-spacing: 2px; color: var(--accent-fg);
background: var(--accent); border: none; border-radius: var(--radius-ctrl);
cursor: pointer; transition: background .15s; }
.login-btn:hover { background: var(--accent-hover); }
.login-err { margin: 14px 0 0; padding: 0; font-size: 13px; line-height: 1.5;
color: var(--danger); text-align: center; }
.login-err:empty { margin: 0; min-height: 0; }
/* ---------------- 移动端（微信内置浏览器为主场景） ---------------- */
@media (max-width: 480px) {
body { padding: 16px; align-items: flex-start; padding-top: 12vh; }
.login-card, .login-box { padding: 30px 22px 22px; }
.login-title, .login-brand { font-size: 20px; }
#loginOverlay { align-items: flex-start; padding-top: 12vh; }
/* ≥16px 可避免 iOS 聚焦时自动放大页面 */
.field-input, .login-button, .login-field input, .login-btn { font-size: 16px; }
}