/* =============================================================================
艾克夫 AKF · 统一设计系统 (Design System)
适用范围：员工学习端 / 管理后台 / 入职自助填报 三端共用
设计语言：现代企业风 Modern Corporate
─────────────────────────────────────────────────────────────────────────
核心原则：
· 稳定网格（12 列 · 24px gutter · 4pt 间距）
· 品牌主色：艾克夫橙红 #E84A1A（≤10% 用量）+ 工业蓝 #1A4789（副）
· 标准化组件（按钮/卡片/表单/表格 4 大族 16 变体）
· 完整导航（侧边栏分组 + 顶栏面包屑）
· 清楚的业务入口（首页一屏可见 6 个主功能）
· 复杂信息可扫描（紧凑表格 + 强信息密度）
· 全场景：明暗双主题 / WCAG AA / 减少动效 / 键盘可达
============================================================================= */
/* ---------- 1. 设计令牌 (Design Tokens) ---------- */
:root {
/* ---- 品牌主色：艾克夫橙红 ---- */
--orange-50: rgb(255, 246, 240);
--orange-100: rgb(255, 230, 217);
--orange-200: rgb(254, 207, 184);
--orange-300: rgb(252, 168, 130);
--orange-400: rgb(244, 120, 67);
--orange-500: rgb(232, 74, 26); /* AKF Primary · 艾克夫主色 */
--orange-600: rgb(196, 56, 14);
--orange-700: rgb(154, 41, 8);
--orange-800: rgb(116, 30, 6);
/* ---- 品牌副色：工业蓝（与 LOGO 下弧呼应）---- */
--blue-50: rgb(240, 247, 255);
--blue-100: rgb(220, 234, 252);
--blue-200: rgb(184, 211, 247);
--blue-300: rgb(135, 178, 233);
--blue-400: rgb(80, 137, 209);
--blue-500: rgb(26, 71, 137); /* AKF Secondary · 工业深蓝 */
--blue-600: rgb(20, 56, 110);
--blue-700: rgb(16, 43, 86);
--blue-800: rgb(11, 30, 60);
/* ---- 暖中性灰 Modern Corporate（不带蓝调）---- */
--n-0: rgb(255, 255, 255);
--n-25: rgb(252, 251, 249);
--n-50: rgb(247, 245, 242);
--n-100: rgb(240, 237, 233);
--n-200: rgb(228, 224, 217);
--n-300: rgb(208, 202, 192);
--n-400: rgb(168, 160, 148);
--n-500: rgb(128, 120, 108);
--n-600: rgb(96, 88, 76);
--n-700: rgb(70, 64, 56);
--n-800: rgb(46, 42, 36);
--n-900: rgb(24, 22, 18);
--n-950: rgb(13, 12, 10);
/* ---- 语义色（保留并优化）---- */
--ok: rgb(20, 142, 65);
--ok-d: rgb(13, 105, 47);
--ok-s: rgb(228, 248, 232);
--warn: rgb(196, 130, 0);
--warn-d: rgb(155, 100, 0);
--warn-s: rgb(255, 240, 210);
--err: rgb(196, 53, 60);
--err-d: rgb(155, 30, 38);
--err-s: rgb(255, 232, 230);
--info: rgb(26, 105, 156);
--info-s: rgb(225, 240, 250);
/* ---- 语义映射（浅色主题） ---- */
--pri: var(--orange-500); /* Primary = 艾克夫橙 */
--pri-hover: var(--orange-600);
--pri-active: var(--orange-700);
--pri-soft: var(--orange-50);
--pri-ring: var(--orange-400);
--on-pri: #ffffff;
--sec: var(--blue-500); /* Secondary = 工业深蓝 */
--sec-hover: var(--blue-600);
--sec-soft: var(--blue-50);
--bg: rgb(248, 247, 244); /* 页面底（极浅米色，比纯白柔）*/
--surface: #ffffff;
--surface-2: rgb(252, 251, 248);
--surface-3: rgb(247, 245, 240);
--surface-hover: rgb(244, 242, 236);
--border: rgb(228, 224, 215);
--border-strong: rgb(204, 198, 187);
--border-focus: var(--orange-400);
--text: rgb(34, 32, 28);
--text-2: rgb(96, 88, 76); /* AA 4.5:1 */
--text-3: rgb(140, 130, 116); /* AA 用于非关键文案 */
/* ---- 阴影（Modern Corporate：克制 + 接地气）---- */
--shadow-1: 0 1px 2px rgba(28, 24, 18, 0.04), 0 1px 3px rgba(28, 24, 18, 0.06);
--shadow-2: 0 4px 12px rgba(28, 24, 18, 0.06), 0 2px 4px rgba(28, 24, 18, 0.04);
--shadow-3: 0 12px 28px rgba(28, 24, 18, 0.10), 0 4px 10px rgba(28, 24, 18, 0.06);
--shadow-pri: 0 6px 16px rgba(232, 74, 26, 0.20), 0 2px 6px rgba(232, 74, 26, 0.12);
--shadow-sm: var(--shadow-1);
--shadow-md: var(--shadow-2);
--shadow-lg: var(--shadow-3);
/* ---- 圆角（收紧：企业风偏 8/12，少 16+）---- */
--r-xs: 4px; --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;
/* ---- 间距 · 4pt 系统 ---- */
--s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
--s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-14: 56px; --s-16: 64px;
--s-20: 80px;
/* ---- 容器与栅格 ---- */
--container: 1440px;
--container-narrow: 1080px;
--gutter: 24px;
--col-gap: 24px;
--row-gap: 24px;
/* ---- 排版 ---- */
--font: system-ui, -apple-system, "Segoe UI", "PingFang SC",
"Microsoft YaHei", "Noto Sans SC", "Source Han Sans CN", sans-serif;
--font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Consolas, monospace;
/* 字号阶梯（紧凑、现代企业偏小） */
--fs-2xs: 0.6875rem; /* 11 · 角标/微标签 */
--fs-xs: 0.75rem; /* 12 · 次级标签 */
--fs-sm: 0.8125rem; /* 13 · 表格/表单 */
--fs-base: 0.875rem; /* 14 · 正文（紧凑） */
--fs-md: 0.9375rem; /* 15 · 略重要 */
--fs-lg: 1.0625rem; /* 17 · 卡片标题 */
--fs-xl: 1.25rem; /* 20 · 二级标题 */
--fs-2xl: 1.5rem; /* 24 · 一级标题 */
--fs-3xl: 1.875rem; /* 30 · 顶栏主标题 */
--fs-4xl: 2.25rem; /* 36 · 大数据 */
/* 字重（企业风偏稳重：500-700 常用） */
--fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900;
/* 行高 */
--lh-tight: 1.25;
--lh-snug: 1.4;
--lh-base: 1.55;
--lh-loose: 1.7;
/* ---- 侧栏与顶栏 ---- */
--side-w: 248px;
--side-w-collapsed: 64px;
--top-h: 60px;
--top-h-sm: 52px;
/* ---- 动效 ---- */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 120ms;
--dur: 200ms;
--dur-slow: 320ms;
/* ---- 层级 ---- */
--z-drop: 100; --z-sticky: 200; --z-mask: 300; --z-modal: 400; --z-toast: 500; --z-tip: 600;
}
/* ---- 语义映射：暗色主题（提亮表面） ---- */
:root[data-theme="dark"] {
--pri: var(--orange-400);
--pri-hover: var(--orange-300);
--pri-active: var(--orange-500);
--pri-soft: rgba(232, 74, 26, 0.16);
--pri-ring: var(--orange-400);
--on-pri: rgb(28, 14, 4);
--sec: rgb(135, 178, 233);
--sec-hover: rgb(184, 211, 247);
--sec-soft: rgba(26, 71, 137, 0.20);
--bg: rgb(14, 13, 11);
--surface: rgb(24, 22, 18);
--surface-2: rgb(34, 31, 26);
--surface-3: rgb(46, 42, 36);
--surface-hover: rgb(54, 49, 40);
--border: rgb(56, 50, 42);
--border-strong: rgb(82, 74, 62);
--border-focus: var(--orange-400);
--text: rgb(238, 234, 226);
--text-2: rgb(184, 178, 166);
--text-3: rgb(140, 134, 124);
--shadow-1: 0 1px 2px rgba(0,0,0,0.5);
--shadow-2: 0 4px 14px rgba(0,0,0,0.55);
--shadow-3: 0 14px 32px rgba(0,0,0,0.6);
--shadow-pri: 0 6px 20px rgba(232, 74, 26, 0.28);
}
/* ---------- 2. 基础重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font);
font-size: var(--fs-base);
line-height: var(--lh-base);
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: var(--pri); text-decoration: none; }
.tabnum { font-variant-numeric: tabular-nums; }
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--pri-ring);
outline-offset: 2px;
border-radius: var(--r-sm);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ---------- 3. 布局容器 + 12 列栅格 ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-6); }
.container--narrow { max-width: var(--container-narrow); }
.grid { display: grid; gap: var(--col-gap) var(--row-gap); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-span-4 { grid-column: span 4; } .col-span-6 { grid-column: span 6; }
.col-span-8 { grid-column: span 8; } .col-span-12 { grid-column: span 12; }
@media (max-width: 960px) {
.grid--3, .grid--4, .grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.grid--2, .grid--3, .grid--4, .grid--6 { grid-template-columns: 1fr; }
.grid--12 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---------- 4. 按钮（4 族 8 态） ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
font-weight: var(--fw-semibold); font-size: var(--fs-base); line-height: 1;
height: 40px; min-height: 40px;
padding: 0 var(--s-5);
border-radius: var(--r); white-space: nowrap;
border: 1px solid transparent;
transition: background var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
-webkit-user-select: none; user-select: none;
}
.btn:active:not(:disabled) { transform: translateY(0.5px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn--primary { background: var(--pri); color: var(--on-pri); box-shadow: var(--shadow-pri); }
.btn--primary:hover:not(:disabled) { background: var(--pri-hover); box-shadow: var(--shadow-pri); }
.btn--secondary { background: var(--sec); color: #fff; }
.btn--secondary:hover:not(:disabled) { background: var(--sec-hover); }
.btn--soft { background: var(--pri-soft); color: var(--pri); }
.btn--soft:hover:not(:disabled) { background: rgba(232, 74, 26, 0.14); }
.btn--ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-strong); }
.btn--neutral { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn--neutral:hover:not(:disabled) { background: var(--surface-3); }
.btn--danger { background: var(--err); color: #fff; }
.btn--danger:hover:not(:disabled) { background: var(--err-d); }
.btn--link { background: transparent; color: var(--pri); padding: 0; height: auto; min-height: 0; }
.btn--link:hover:not(:disabled) { color: var(--pri-hover); text-decoration: underline; }
.btn--sm { height: 32px; min-height: 32px; padding: 0 var(--s-3); font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn--lg { height: 48px; padding: 0 var(--s-6); font-size: var(--fs-md); }
.btn--block { width: 100%; }
.btn--icon { width: 40px; padding: 0; }
.btn--icon.btn--sm { width: 32px; }
/* ---------- 5. 表单 ---------- */
.field { margin-bottom: var(--s-4); }
.field > label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); margin-bottom: var(--s-2); }
.input, .select, .textarea {
width: 100%; height: 40px; padding: 0 var(--s-3);
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--r);
font-size: var(--fs-base); color: var(--text);
transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.textarea { height: auto; min-height: 96px; padding: var(--s-3); line-height: var(--lh-snug); resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-3); }
.input:focus, .select:focus, .textarea:focus {
border-color: var(--border-focus);
box-shadow: 0 0 0 3px rgba(232, 74, 26, 0.14);
}
.input--sm { height: 32px; padding: 0 var(--s-2); font-size: var(--fs-sm); }
.input--lg { height: 48px; padding: 0 var(--s-4); font-size: var(--fs-md); }
.input-group { display: flex; gap: var(--s-2); }
.input-group .input { flex: 1; min-width: 0; }
.input-suffix { position: relative; }
.input-suffix .input { padding-right: 84px; }
.input-suffix .suffix { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
/* ---------- 6. 卡片 / 表面 ---------- */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: var(--s-6);
box-shadow: var(--shadow-sm);
}
.card--flat { box-shadow: none; }
.card--hover { transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur); }
.card--hover:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); }
.card-head h3 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text); }
.card-body { color: var(--text-2); }
/* KPI 卡（看板数字）*/
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5) var(--s-6); display: flex; flex-direction: column; gap: var(--s-2); box-shadow: var(--shadow-sm); }
.kpi__label { color: var(--text-2); font-size: var(--fs-sm); }
.kpi__value { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1.1; }
.kpi__delta { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.kpi__delta--up { color: var(--ok); }
.kpi__delta--down { color: var(--err); }
/* ---------- 7. 徽章 / 标签 ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.badge--pri { background: var(--pri-soft); color: var(--pri); }
.badge--sec { background: var(--sec-soft); color: var(--sec); }
.badge--ok { background: var(--ok-s); color: var(--ok-d); }
.badge--warn { background: var(--warn-s); color: var(--warn-d); }
.badge--err { background: var(--err-s); color: var(--err-d); }
.badge--info { background: var(--info-s); color: var(--info); }
.badge--dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--sm { padding: 1px 6px; font-size: var(--fs-2xs); }
.badge--lg { padding: 4px 12px; font-size: var(--fs-sm); }
/* ---------- 8. 表格（紧凑、信息密集、可扫描）---------- */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.tbl thead th {
background: var(--surface-2);
color: var(--text-2);
font-weight: var(--fw-semibold);
text-align: left;
padding: var(--s-3) var(--s-4);
border-bottom: 1px solid var(--border);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
position: sticky; top: 0; z-index: 1;
}
.tbl tbody td {
padding: var(--s-3) var(--s-4);
border-bottom: 1px solid var(--border);
color: var(--text);
vertical-align: middle;
}
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: var(--surface-hover); }
.tbl--center th, .tbl--center td { text-align: center; }
.tbl--num td, .tbl--num th { font-variant-numeric: tabular-nums; }
.tbl--compact th, .tbl--compact td { padding: var(--s-2) var(--s-3); }
.tbl-wrap { overflow-x: auto; }
.tbl-scroll { overflow-x: auto; }
.tbl-scroll .tbl { min-width: 1080px; }
/* ---------- 9. 分隔 / 标题小节 ---------- */
.divider { height: 1px; background: var(--border); margin: var(--s-6) 0; }
.section-title { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.section-title h2, .section-title h3 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--text); }
.section-title__sub { color: var(--text-2); font-size: var(--fs-sm); }
.section-title__accent { width: 3px; height: 16px; border-radius: 2px; background: var(--pri); }
/* ---------- 10. 导航 / 顶栏 / 侧栏 ----------
现代企业风：左侧栏 + 顶栏 + 内容三段式，固定结构。
*/
.layout { display: flex; min-height: 100vh; }
.layout__side { width: var(--side-w); flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.layout__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: var(--top-h); background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 var(--s-6); gap: var(--s-4); }
.topbar__title { font-size: var(--fs-xl); font-weight: var(--fw-semibold); flex: 1; min-width: 0; }
.topbar__crumbs { color: var(--text-3); font-size: var(--fs-sm); margin-bottom: 2px; display: flex; align-items: center; gap: var(--s-2); }
.topbar__crumbs a { color: var(--text-2); }
.topbar__crumbs a:hover { color: var(--pri); }
.topbar__who { display: flex; align-items: center; gap: var(--s-3); }
.page { padding: var(--s-6) var(--s-8); flex: 1; background: var(--bg); }
.page-narrow { max-width: var(--container-narrow); margin-inline: auto; }
/* 侧栏品牌区 */
.brand { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5) var(--s-5); border-bottom: 1px solid var(--border); min-height: var(--top-h); }
.brand img, .brand svg { width: 30px; height: 30px; flex-shrink: 0; }
.brand__name { font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--text); letter-spacing: -0.01em; }
.brand__sub { font-size: var(--fs-xs); color: var(--text-3); margin-top: -2px; }
/* 侧栏导航 */
.nav { flex: 1; overflow-y: auto; padding: var(--s-3) var(--s-2); }
.nav-group { margin-bottom: var(--s-4); }
.nav-group__label { padding: var(--s-3) var(--s-3) var(--s-2); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); font-weight: var(--fw-semibold); }
.nav-item {
display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-3);
color: var(--text-2); font-weight: var(--fw-semibold); border-radius: var(--r-sm);
margin: 2px var(--s-2); font-size: var(--fs-sm);
transition: background var(--dur-fast), color var(--dur-fast);
}
.nav-item i { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.78; }
.nav-item:hover { background: var(--surface-hover); color: var(--text); }
.nav-item.active { background: var(--pri-soft); color: var(--pri); }
.nav-item.active i { color: var(--pri); opacity: 1; }
.nav-foot { padding: var(--s-3); border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-3); }
/* ---------- 11. 登录页（现代企业分屏，左侧 LOGO 形象区，右侧表单） ---------- */
.login-screen { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.login-screen .aside {
background:
radial-gradient(1200px 600px at 0% 0%, rgba(232, 74, 26, 0.18), transparent 55%),
radial-gradient(900px 500px at 100% 100%, rgba(26, 71, 137, 0.30), transparent 60%),
linear-gradient(155deg, #16223b 0%, #0c1626 100%);
color: #fff;
padding: var(--s-12) var(--s-12);
display: flex; flex-direction: column; justify-content: space-between;
position: relative; overflow: hidden;
}
.login-screen .aside::before {
/* 装饰：右上橙色弧形呼应 LOGO */
content: '';
position: absolute;
right: -240px; top: -180px;
width: 540px; height: 540px;
border: 36px solid var(--pri);
border-bottom: none; border-left: none;
border-radius: 50%;
opacity: 0.18;
filter: blur(0.5px);
}
.login-screen .aside::after {
/* 左下蓝色弧形 */
content: '';
position: absolute;
left: -180px; bottom: -180px;
width: 460px; height: 460px;
border: 32px solid var(--sec);
border-top: none; border-right: none;
border-radius: 50%;
opacity: 0.22;
}
.login-screen .brand-lg { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-lg); font-weight: var(--fw-bold); position: relative; z-index: 1; }
.login-screen .brand-lg img, .login-screen .brand-lg svg { width: 44px; height: 44px; }
.login-screen .tagline { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: #fff; letter-spacing: -0.01em; line-height: 1.3; position: relative; z-index: 1; }
.login-screen .tagline + p { color: rgba(255,255,255,0.78); font-size: var(--fs-md); margin-top: var(--s-3); position: relative; z-index: 1; }
.login-screen .feat { display: grid; gap: var(--s-3); position: relative; z-index: 1; }
.login-screen .feat > div { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); color: rgba(255,255,255,0.82); }
.login-screen .feat .ic { width: 32px; height: 32px; background: rgba(255,255,255,0.10); border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; }
.login-screen .feat .ic i { width: 16px; height: 16px; color: #fff; }
.login-screen .form { background: var(--bg); padding: var(--s-12) var(--s-16); display: flex; flex-direction: column; justify-content: center; max-width: 560px; }
.login-screen .form h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; margin-bottom: var(--s-2); }
.login-screen .form .sub { color: var(--text-2); margin-bottom: var(--s-8); font-size: var(--fs-md); }
.login-screen .form .fld { margin-bottom: var(--s-5); }
.login-screen .form .fld label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); margin-bottom: var(--s-2); }
.login-screen .tip-acc { margin-top: var(--s-5); color: var(--text-2); font-size: var(--fs-sm); }
.login-screen .tip-acc a { color: var(--pri); font-weight: var(--fw-semibold); }
.login-screen .tip-acc a:hover { color: var(--pri-hover); }
@media (max-width: 960px) {
.login-screen { grid-template-columns: 1fr; }
.login-screen .aside { padding: var(--s-8) var(--s-6); min-height: 220px; }
.login-screen .form { padding: var(--s-8) var(--s-6); }
.login-screen .aside::before, .login-screen .aside::after { display: none; }
}
/* ---------- 12. 弹窗 / 蒙层 ----------
双层体系：
· 新派 BEM（推荐）： ..
..
· 老派零装饰（admin-core.js 内联 h3/foot，全屏档案详情等场景）：
直接在 .modal 里写 、
、