/* ==================================================================
   智能办公 · 全局样式（CSS 变量驱动，深/浅两套主题，零依赖）
   ================================================================== */

:root {
  --primary: #1677ff;
  --primary-hover: #4096ff;
  --primary-soft: rgba(22, 119, 255, 0.12);
  --success: #00b42a;
  --warning: #ff7d00;
  --danger: #f53f3f;
  --info: #86909c;

  --bg: #f5f7fa;
  --bg-elevated: #ffffff;
  --card: #ffffff;
  --card-2: #fafbfc;
  --text-1: #1d2129;
  --text-2: #4e5969;
  --text-3: #86909c;
  --border: #e5e6eb;
  --border-2: #f0f1f3;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
  --radius: 10px;
  --radius-sm: 6px;
  --sidebar-w: 240px;
  --topbar-h: 56px;
}

html[data-theme="dark"] {
  --primary: #3b82f6;
  --primary-hover: #60a5fa;
  --primary-soft: rgba(59, 130, 246, 0.18);
  --success: #23c343;
  --warning: #ff9a2e;
  --danger: #f76560;
  --info: #7f8a9a;

  --bg: #141a22;
  --bg-elevated: #1d2530;
  --card: #1d2530;
  --card-2: #232c38;
  --text-1: #e8eaed;
  --text-2: #a9b4c2;
  --text-3: #7b8798;
  --border: #2c3644;
  --border-2: #232c38;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 10px 34px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: var(--text-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0; }
.muted { color: var(--text-3); }
.hidden { display: none !important; }

/* ---------- 布局 ---------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: var(--bg-elevated); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; height: var(--topbar-h); padding: 0 18px; border-bottom: 1px solid var(--border); }
.brand-logo { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--primary), #7c3aed); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.brand-name { font-size: 16px; font-weight: 700; letter-spacing: .5px; }
.menu { flex: 1; overflow-y: auto; padding: 10px 10px 24px; }
.menu-group-title { font-size: 11px; color: var(--text-3); padding: 12px 12px 6px; letter-spacing: 1px; }
.menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-2); cursor: pointer; margin-bottom: 2px; transition: .15s; font-size: 14px; }
.menu-item:hover { background: var(--bg); color: var(--text-1); }
.menu-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.menu-item .mi-icon { width: 18px; text-align: center; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: var(--topbar-h); background: var(--bg-elevated); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; padding: 0 18px; position: sticky; top: 0; z-index: 15;
}
.topbar .crumb { color: var(--text-3); font-size: 13px; flex: 1; }
.topbar .spacer { flex: 1; }

/* v6.0 多公司：顶栏公司切换器（单公司账号由 JS 加 .hidden，完全不出现） */
.company-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: var(--radius-sm);
  background: var(--primary-soft); color: var(--primary);
  font-size: 13px; font-weight: 600;
}
.company-chip .company-globe { font-size: 13px; line-height: 1; }
.company-select {
  border: none; background: transparent; color: inherit; font: inherit;
  cursor: pointer; padding: 0 2px; max-width: 180px; outline: none;
}
.company-select option { color: var(--text); background: var(--bg-elevated); }
@media (max-width: 768px) { .company-chip .company-select { max-width: 96px; } }
.icon-btn { border: none; background: transparent; color: var(--text-2); font-size: 16px; cursor: pointer; padding: 6px 8px; border-radius: var(--radius-sm); position: relative; }
.icon-btn:hover { background: var(--bg); }
.icon-btn.danger { color: var(--danger); }
.bell-badge { position: absolute; top: 0; right: 0; background: var(--danger); color: #fff; font-size: 10px; min-width: 16px; height: 16px; border-radius: 8px; display: grid; place-items: center; padding: 0 3px; }
.user-chip { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 20px; cursor: pointer; }
.user-chip:hover { background: var(--bg); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-weight: 700; font-size: 13px; overflow: hidden; flex: 0 0 auto; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.content { flex: 1; padding: 20px; overflow-x: hidden; }

/* 移动端：侧栏抽屉 */
.menu-toggle { display: none; }
@media (max-width: 768px) {
  .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: .25s; }
  .sidebar.open { transform: none; box-shadow: var(--shadow-lg); }
  .menu-toggle { display: inline-block; }
  .content { padding: 14px; }
}

/* ---------- 页面头 / 卡片 ---------- */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.page-title { font-size: 20px; }
.page-sub { color: var(--text-3); font-size: 13px; margin-top: 4px; }
/* v6.0 多公司：标题旁的「当前公司」标（仅能切换公司的账号可见） */
.company-tag {
  display: inline-block; margin-left: 10px; vertical-align: middle;
  padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600;
  background: var(--primary-soft); color: var(--primary);
}
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border-2); }
.card-title { font-size: 15px; }
.card-actions { display: flex; gap: 8px; align-items: center; }
.card-body { padding: 16px; }
.grid { display: grid; gap: 16px; }
.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-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); } }
@media (max-width: 720px) { .grid-2, .grid-4, .grid-5 { grid-template-columns: 1fr; } }

.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); border-left: 3px solid var(--primary); }
.stat-card.tone-success { border-left-color: var(--success); }
.stat-card.tone-warning { border-left-color: var(--warning); }
.stat-card.tone-danger { border-left-color: var(--danger); }
.stat-label { color: var(--text-3); font-size: 13px; }
.stat-value { font-size: 26px; font-weight: 700; margin: 6px 0 2px; }
.stat-hint { color: var(--text-3); font-size: 12px; }

/* ---------- 按钮 ---------- */
.btn { border: 1px solid var(--border); background: var(--card); color: var(--text-1); padding: 7px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; transition: .15s; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.btn:hover { border-color: var(--primary); color: var(--primary); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { opacity: .9; color: #fff; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- 徽标 ---------- */
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; line-height: 18px; background: var(--bg); color: var(--text-2); border: 1px solid var(--border); }
.badge-primary { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.badge-success { background: rgba(0, 180, 42, .12); color: var(--success); border-color: transparent; }
.badge-warning { background: rgba(255, 125, 0, .14); color: var(--warning); border-color: transparent; }
.badge-danger { background: rgba(245, 63, 63, .12); color: var(--danger); border-color: transparent; }
.badge-info { background: var(--bg); color: var(--text-2); }

/* ---------- 表格 ---------- */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { text-align: left; padding: 10px 12px; color: var(--text-3); font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--card-2); }
.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-2); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.row-clickable { cursor: pointer; }
.row-clickable:hover { background: var(--card-2); }
.pager { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px 2px; }
.pager-info { color: var(--text-3); font-size: 12px; }
.pager-btns { display: flex; gap: 8px; }

.mini-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.mini-table th, .mini-table td { border: 1px solid var(--border); padding: 4px 6px; }
.mini-table th { background: var(--card-2); color: var(--text-3); }

/* ---------- 表单 ---------- */
.form-item { margin-bottom: 14px; }
.form-label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.form-label.required::after { content: " *"; color: var(--danger); }
.form-help { font-size: 12px; color: var(--text-3); margin-top: 4px; }
/* 只读派生值（「能自己算出来的」字段展示块）—— 高度与 .input 对齐，视觉上明显不是可编辑控件 */
.ro-value { display: flex; align-items: center; gap: 6px; min-height: 35px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--card-2); }
.ro-value-text { flex: 1; font-size: 13px; font-weight: 600; color: var(--text-1); word-break: break-all; }
.ro-tag { flex: none; font-size: 11px; font-weight: 600; line-height: 16px; padding: 0 5px; border-radius: 4px; background: var(--primary-soft); color: var(--primary); }
.ro-tag.manual { background: rgba(255, 125, 0, .14); color: var(--warning); }
.input { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--text-1); font-size: 13px; font-family: inherit; outline: none; transition: .15s; }
.input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.textarea { resize: vertical; min-height: 84px; }
.input-with-unit { display: flex; align-items: center; gap: 8px; }
.input-with-unit .unit { color: var(--text-3); font-size: 13px; }
.char-counter { font-size: 12px; color: var(--text-3); margin-top: 4px; text-align: right; }
.char-counter.warn { color: var(--warning); }
.radio-group, .checkbox-group { display: flex; flex-direction: column; gap: 6px; }
.checkbox-group, .radio-group { flex-direction: row; flex-wrap: wrap; }
.radio-item, .checkbox-item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 18px; cursor: pointer; font-size: 13px; transition: .15s; }
.radio-item.checked, .checkbox-item.checked { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.rating-group { display: flex; align-items: center; gap: 4px; }
.star { font-size: 22px; color: var(--border); cursor: pointer; line-height: 1; }
.star.on { color: #ffb400; }
.rating-value { margin-left: 8px; color: var(--text-3); font-size: 12px; }
.file-field .file-list { margin-top: 8px; }
.file-item { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--text-2); padding: 3px 0; }
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.filter-bar .form-item { margin-bottom: 0; min-width: 150px; }
.filter-bar .input { min-width: 140px; }

/* ---------- Tabs ---------- */
.tabs-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; overflow-x: auto; }
.tab { border: none; background: transparent; padding: 9px 14px; cursor: pointer; color: var(--text-2); font-size: 14px; border-bottom: 2px solid transparent; white-space: nowrap; }
.tab:hover { color: var(--primary); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* ---------- Modal / Drawer ---------- */
/* ⚠️ 层级表（v6.17 排定、v6.19 随底部导航移除而更新，改任何浮层前先看这里）：
   topbar 15 < sidebar(常驻) 20 < ss-menu 30 < nav-mask 185 < sidebar(抽屉) 190
   < modal/drawer-overlay 195 < toast 200 < sheet-overlay 220。
   v6.16.2 之前 modal-overlay 是 100 —— 手机上曾被底部导航(180)压住，弹窗底部字段点不到；
   v6.19 底部导航已移除，但 195 的层级仍然正确（盖住抽屉遮罩、低于 toast 与底部弹层）。 */
.modal-overlay, .drawer-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .42); display: flex; align-items: center; justify-content: center; z-index: 195; padding: 16px; }
.modal { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-lg); max-width: 100%; max-height: 90vh; display: flex; flex-direction: column; animation: pop .16s ease-out; }
@keyframes pop { from { transform: scale(.96); opacity: .4; } to { transform: none; opacity: 1; } }
.modal-head, .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.modal-title, .drawer-title { font-size: 15px; }
.modal-body { padding: 18px; overflow-y: auto; }
.modal-foot { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
.drawer-overlay { justify-content: flex-end; padding: 0; }
.drawer { background: var(--card); height: 100%; max-width: 92vw; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); animation: slide .2s ease-out; }
@keyframes slide { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.drawer-body { padding: 18px; overflow-y: auto; }

/* ---------- Toast ---------- */
#toast-root { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: 9px 16px; border-radius: 20px; font-size: 13px; display: flex; gap: 8px; align-items: center; animation: pop .16s; }
.toast-out { opacity: 0; transform: translateY(-8px); transition: .3s; }
.toast-error { border-color: var(--danger); }
.toast-success { border-color: var(--success); }

/* ---------- 时间轴 / 进度 ---------- */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline-item { position: relative; padding: 0 0 16px 22px; border-left: 2px solid var(--border); }
.timeline-item:last-child { border-left-color: transparent; }
.timeline-dot { position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); border: 2px solid var(--card); }
.timeline-item.tone-success .timeline-dot { background: var(--success); }
.timeline-item.tone-warning .timeline-dot { background: var(--warning); }
.timeline-item.tone-danger .timeline-dot { background: var(--danger); }
.timeline-title { font-size: 13px; font-weight: 600; }
.timeline-desc { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.timeline-time { font-size: 11px; color: var(--text-3); margin-top: 3px; }

.progress { background: var(--border-2); border-radius: 6px; height: 8px; overflow: hidden; width: 100%; }
.progress-inner { height: 100%; background: var(--primary); border-radius: 6px; transition: width .3s; }
.progress.tone-success .progress-inner { background: var(--success); }
.progress.tone-warning .progress-inner { background: var(--warning); }
.progress.tone-danger .progress-inner { background: var(--danger); }

/* ---------- 描述列表 ---------- */
.desc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 20px; }
.desc-label { font-size: 12px; color: var(--text-3); margin-bottom: 3px; }
.desc-value { font-size: 13px; color: var(--text-1); word-break: break-all; }

/* ---------- 空状态 / 骨架 ---------- */
.empty-state { text-align: center; padding: 36px 12px; color: var(--text-3); }
.empty-emoji { font-size: 32px; margin-bottom: 8px; }
.empty-line { color: var(--text-3); font-size: 13px; padding: 10px 0; }
.loading-skeleton { padding: 8px; }
.sk-bar { height: 14px; background: var(--border-2); border-radius: 6px; margin-bottom: 10px; animation: sk 1.2s infinite; }
.sk-card { height: 120px; background: var(--border-2); border-radius: var(--radius); animation: sk 1.2s infinite; }
@keyframes sk { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* ---------- 登录页：v6.19 起 = 「深蓝 × 金」豪华风（完整样式见文件末尾 v6.19 区段） ---------- */
body.login-mode .sidebar, body.login-mode .topbar { display: none; }
.login-err { color: var(--danger); font-size: 13px; min-height: 18px; margin-bottom: 8px; }

/* ---------- 三栏模板编辑器 ---------- */
.editor-3col { display: grid; grid-template-columns: 200px 1fr 300px; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .editor-3col { grid-template-columns: 1fr; } }
.palette-item { padding: 8px 10px; border: 1px dashed var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; cursor: grab; font-size: 13px; background: var(--card); }
.palette-item:hover { border-color: var(--primary); color: var(--primary); }
.field-canvas .field-block { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 10px; background: var(--card); }
.field-block.active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.field-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.field-block-title { font-weight: 600; font-size: 13px; }
.field-block-meta { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.drag-over { outline: 2px dashed var(--primary); }

/* ---------- 看板 ---------- */
.kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kanban { grid-template-columns: 1fr; } }
.kanban-col { background: var(--card-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; min-height: 120px; }
.kanban-col.drag-over { background: var(--primary-soft); }
.kanban-col-title { font-size: 13px; font-weight: 600; margin-bottom: 10px; display: flex; justify-content: space-between; }
.kanban-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 8px; cursor: grab; box-shadow: var(--shadow); }
.kanban-card.dragging { opacity: .5; }
.kanban-card-title { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.risk-lane { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .risk-lane { grid-template-columns: 1fr; } }
.risk-card { border: 1px solid var(--border); border-left: 4px solid var(--info); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 8px; background: var(--card); cursor: pointer; }
.risk-card.level-high { border-left-color: var(--danger); }
.risk-card.level-medium { border-left-color: var(--warning); }
.risk-card.level-low { border-left-color: var(--success); }
.risk-card-head { display: flex; align-items: center; gap: 8px; }
.risk-score { margin-left: auto; font-weight: 700; }
.tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 9px; margin: 3px 4px 0 0; background: rgba(245, 63, 63, .1); color: var(--danger); }
.tag-soft { background: var(--bg); color: var(--text-2); }

/* ---------- 课程瀑布流 ---------- */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.course-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--card); cursor: pointer; box-shadow: var(--shadow); }
.course-cover { height: 96px; background: linear-gradient(135deg, var(--primary), #7c3aed); display: grid; place-items: center; color: #fff; font-size: 22px; }
.course-body { padding: 12px; }

/* ---------- diff ---------- */
.diff-add { background: rgba(0, 180, 42, .12); }
.diff-del { background: rgba(245, 63, 63, .12); text-decoration: line-through; }
.code-block { background: var(--card-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; white-space: pre-wrap; word-break: break-all; max-height: 320px; overflow: auto; }

/* ---------- 图表容器 ---------- */
.chart-box { position: relative; width: 100%; }
.chart-box canvas { width: 100%; display: block; }

/* 打印/滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ==================================================================
 * v2 增量样式：状态胶囊 / 步骤条 / 底部弹层 / 移动端底部导航 / 打卡按钮
 * ================================================================== */

/* 状态胶囊 */
.pill { display: inline-block; font-size: 11px; line-height: 1; padding: 4px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.pill-info { background: rgba(22, 119, 255, .1); color: var(--primary); }
.pill-success { background: rgba(0, 180, 42, .12); color: var(--success); }
.pill-warning { background: rgba(255, 125, 0, .14); color: var(--warning); }
.pill-danger { background: rgba(245, 63, 63, .12); color: var(--danger); }
.pill-default { background: var(--bg); color: var(--text-2); border-color: var(--border); }

/* 步骤条 */
.stepbar { display: flex; align-items: flex-start; gap: 0; margin: 10px 0 16px; overflow-x: auto; padding-bottom: 4px; }
.stepbar-step { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.stepbar-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--bg); border: 1px solid var(--border); color: var(--text-3); }
.stepbar-step.done .stepbar-dot { background: var(--primary); border-color: var(--primary); color: #fff; }
.stepbar-step.current .stepbar-dot { box-shadow: 0 0 0 4px rgba(22, 119, 255, .18); }
.stepbar-step.failed .stepbar-dot { background: var(--bg); border-color: var(--text-3); color: var(--text-3); }
.stepbar-label { font-size: 11px; margin-top: 6px; color: var(--text-2); white-space: nowrap; }
.stepbar-step.current .stepbar-label { color: var(--primary); font-weight: 600; }
.stepbar-line { flex: 1; height: 2px; background: var(--border); margin-top: 12px; min-width: 18px; }
.stepbar-line.done { background: var(--primary); }

/* 底部弹层 */
.sheet-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 220; opacity: 0; transition: opacity .2s; }
.sheet-overlay.open { opacity: 1; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--card); border-radius: 14px 14px 0 0; max-height: 82vh; display: flex; flex-direction: column; transform: translateY(100%); transition: transform .24s ease; }
.sheet-overlay.open .sheet { transform: translateY(0); }
.sheet-head { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.sheet-title { margin: 0; font-size: 15px; }
.sheet-head .icon-btn { margin-left: auto; }
.sheet-body { padding: 14px 16px; overflow-y: auto; }
.sheet-foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }

/* v6.19：移动端底部导航（.tabbar）已移除 —— 手机导航统一走左侧抽屉；
   下面只保留「页面内大打卡按钮」的样式（#/m/clock 打卡页仍在）。 */
.clock-btn { width: 148px; height: 148px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--primary), #4096ff); color: #fff; font-size: 18px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 28px rgba(22, 119, 255, .38); display: grid; place-items: center; gap: 2px; }
.clock-btn:active { transform: scale(.96); }
.clock-btn.clock-out { background: linear-gradient(135deg, var(--warning), #ffb84d); box-shadow: 0 10px 28px rgba(255, 125, 0, .34); }
.clock-btn .cb-icon { font-size: 30px; }

@media (max-width: 768px) {
  /* ⚠️ 这里原来有一条 `.sidebar { display: none; }`，v6.14 已删除。
     它和上面 L121 的抽屉规则「同选择器 + 同媒体查询 + 同优先级」，
     按 CSS 规则后写的胜出 → 抽屉的 transform 被 display 压掉 →
     ☰ 按钮点下去毫无反应，侧栏 30+ 个菜单在手机上完全不可达
     （底部导航只有 5 个入口）。现改为抽屉，完整形态见文件末尾 v6.14 区段。 */
  /* v6.19：底部导航移除，内容区不再需要给 tabbar 让出 84px，只留安全区 */
  .content { padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .topbar { padding: 8px 12px; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .grid.grid-2, .grid.grid-3, .grid.grid-4, .grid.grid-5 { grid-template-columns: 1fr 1fr; }
  .risk-lane { grid-template-columns: 1fr; }
  .modal { width: 94vw !important; }
  .drawer { width: 92vw !important; }
  .table-wrap { margin: 0 -12px; }
  .data-table th, .data-table td { padding: 8px; font-size: 12px; }
  .stat-value { font-size: 20px; }
}

@media (max-width: 420px) {
  .grid.grid-2, .grid.grid-3, .grid.grid-4, .grid.grid-5 { grid-template-columns: 1fr; }
  .clock-btn { width: 128px; height: 128px; font-size: 16px; }
}

/* v2: 周时间线 7 列 */
.grid.grid-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 768px) { .grid.grid-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.doc-node:hover { background: var(--bg); }
.doc-node.active { background: rgba(22, 119, 255, .08); }
.row-gap { display: flex; gap: 6px; flex-wrap: wrap; }

/* ==================================================================
 * v6.14 移动端适配
 *
 * 为什么单独一整段：v2 那一轮已经做过移动端（底部导航 / 底部弹层 / 大打卡按钮），
 * 但侧栏抽屉被文件中部一条 `.sidebar { display: none; }` 覆盖掉了 ——
 * 手机上只有底部 5 个入口可达，其余 20+ 个页面（财务 / 房租 / 审计 / 档案 / 学城 …）
 * **根本进不去**。本段把它修回来，并补齐只有真机才暴露的几类问题：
 *   ① iOS 输入框 font-size < 16px → 聚焦时页面自动放大
 *   ② 100vh 在移动浏览器里把地址栏算进去 → 布局被顶出屏幕
 *   ③ 刘海屏 / 小圆角屏的安全区（viewport-fit=cover 已开，需要 env() 配合）
 *   ④ 手指点击目标太小、点击有灰色高亮块、双击缩放延迟
 *   ⑤ 登录页漏隐藏底部导航
 *
 * 全部规则只在 ≤768px（或触屏）生效，桌面端一行不改。
 * ================================================================== */

/* 抽屉遮罩与关闭按钮：桌面端不存在（侧栏常驻，不需要关） */
.nav-mask { display: none; }
.nav-close { display: none; }
/* v6.19：底部导航已移除，本条随之作废（登录页/主界面都不再有 tabbar） */

/* 触屏设备：去掉点击灰色高亮块，并消除 300ms 的双击缩放等待 */
@media (hover: none) {
  body { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
  .btn, .menu-item, .tab, .icon-btn, .row-clickable, .radio-item, .checkbox-item {
    touch-action: manipulation;
  }
}

@media (max-width: 768px) {
  /* ---------- 1. 侧栏抽屉（修掉 v2 被覆盖的那条规则） ---------- */
  /* z-index 190：高于抽屉遮罩(185)，低于弹窗(195)/toast(200)/底部弹层(220) */
  .sidebar {
    height: 100dvh;
    z-index: 190;
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
  }
  .nav-close { display: inline-block; margin-left: auto; }
  .nav-mask {
    display: block; position: fixed; inset: 0; z-index: 185;
    background: rgba(0, 0, 0, .42);
    opacity: 0; pointer-events: none; transition: opacity .25s;
  }
  .nav-mask.open { opacity: 1; pointer-events: auto; }
  /* 抽屉打开时锁住页面滚动 —— 否则会出现「手指滑的是抽屉、底下页面在滚」 */
  body.nav-open { overflow: hidden; }
  /* 菜单项做大，手指好点（≥44px 是移动端通行的最小触摸目标） */
  .menu { padding: 8px 10px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .menu-item { padding: 12px; min-height: 44px; }

  /* ---------- 2. 顶部栏：精简 + 避开刘海 ---------- */
  .topbar {
    height: auto;
    min-height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
    padding: calc(8px + env(safe-area-inset-top, 0px))
             calc(12px + env(safe-area-inset-right, 0px))
             8px
             calc(12px + env(safe-area-inset-left, 0px));
    gap: 6px;
  }
  .topbar .crumb { display: none; }   /* 所在位置由侧栏高亮表达，省出横向空间给控件 */
  #user-name { display: none; }       /* 只留头像 */
  .user-chip { padding: 2px; }
  .icon-btn { padding: 8px 9px; }     /* 触摸区放大到 ~36px */
  .company-chip { padding: 3px 7px; font-size: 12px; }

  /* ---------- 3. 内容区：跟随安全区（v6.19 起无底部导航，不用再让 84px） ---------- */
  .content {
    padding: 12px
             calc(12px + env(safe-area-inset-right, 0px))
             calc(16px + env(safe-area-inset-bottom, 0px))
             calc(12px + env(safe-area-inset-left, 0px));
  }
  .page-title { font-size: 18px; }
  .card-head { padding: 12px; }
  .card-body { padding: 12px; }

  /* ---------- 4. iOS：输入框字号 < 16px 会触发「聚焦自动放大整页」 ---------- */
  /* input / textarea / select 前端统一用 .input 类（见 ui.js），改一处即可全覆盖。
     只放大字号、不动内边距与行高，视觉上几乎无差别，但不再乱缩放。 */
  .input { font-size: 16px; }

  /* ---------- 5. 筛选条：手机上竖排，每个控件占满一行 ---------- */
  .filter-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .filter-bar .form-item, .filter-bar .input { min-width: 0; width: 100%; }
  .filter-bar .btn { justify-content: center; }

  /* ---------- 6. 表格：手机上仍靠横向滚动，这里只把体验做顺 ---------- */
  .table-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;   /* 横滑到头别触发浏览器「后退」手势 */
  }
  .pager { flex-direction: column; align-items: stretch; gap: 8px; }
  .pager-btns { justify-content: center; }
  .pager-btns .btn { flex: 1; justify-content: center; }

  /* ---------- 7. 弹窗 / 抽屉：别超出可视高度 ---------- */
  .modal { max-height: 88dvh; }
  .modal-head, .modal-foot { padding: 12px 14px; }
  .modal-body, .drawer-body { padding: 14px; }

  /* ---------- 8. 触摸目标：按钮 / 标签页再大一点 ---------- */
  .btn { min-height: 36px; }
  .btn-sm { min-height: 32px; }
  .tab { padding: 11px 14px; }
  .radio-item, .checkbox-item { padding: 8px 14px; }

  /* ---------- 9. 移动端地址栏：100vh 会多算一截，改用 dvh（保留 100vh 兜底） ---------- */
  .app-shell { min-height: 100vh; min-height: 100dvh; }
  /* 登录页自身样式在文件末尾 v6.19 区段（自带 dvh 与移动端适配），此处不再重复 */
}

/* 窄屏手机（≤420px）：统计卡保持两列 —— 压成单列会拉出一长条，反而更难扫 */
@media (max-width: 420px) {
  .grid.grid-3 { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------------ *
 * v6.16.1 可搜索下拉选择器（ui.searchSelect）
 * 用于选项多的场景（员工 / 资产 / 课程）：原生 select 只能滚动找，
 * 这里打字过滤 —— 姓名与工号都能命中，空格分词即 AND。
 * ------------------------------------------------------------------ */
.ss-wrap { position: relative; }
.ss-wrap .ss-input { padding-right: 32px; }
.ss-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: none; border: 0; background: none; cursor: pointer;
  color: var(--text-3); font-size: 12px; line-height: 1; padding: 4px 5px; border-radius: 4px;
}
.ss-wrap.has-value .ss-clear { display: block; }
.ss-clear:hover { background: var(--border-2); color: var(--text-1); }

.ss-menu {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 260px; overflow-y: auto; padding: 4px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  display: none;
}
.ss-wrap.open .ss-menu { display: block; }
/* 下方空间不足时向上展开（JS 判定后挂 .up） */
.ss-wrap.up .ss-menu { top: auto; bottom: calc(100% + 4px); }

.ss-item {
  padding: 7px 10px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-1); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-item:hover, .ss-item.active { background: var(--primary-soft); }
.ss-item.selected { font-weight: 600; }
.ss-item.selected::after { content: "✓"; float: right; color: var(--primary); font-size: 12px; }
.ss-empty { padding: 12px 8px; text-align: center; color: var(--text-3); font-size: 12px; }

@media (max-width: 768px) {
  .ss-menu { max-height: 44vh; }
  .ss-item { padding: 9px 10px; }   /* 手机端触摸目标更大 */
}

/* ==================================================================
 * v6.17 手机端弹窗「网银式」全面适配
 *
 * 用户实测反馈（2026-10-10）：手机浏览器打开「上报骑手事故」，弹窗被
 * 底部导航（首页/打卡/审批/绩效/我的）压住，「事故经过」等底部字段
 * 点不到；字段还挤成两列。两个根因：
 *   ① modal-overlay z-index=100 < tabbar 180 → 底部导航浮在弹窗上（v6.19 起底部导航已移除，但层级修复保留）
 *      （已在上方层级表里改成 195，此处不再重复声明）；
 *   ② 弹窗内沿用了桌面栅格：≤768px 时 grid-3 被压成两列，≤420px 时
 *      「统计卡保持两列」的特例规则又把 grid-3 拉回两列 —— 这条特例
 *      是给仪表盘统计卡的，不该殃及弹窗表单。
 * 本段把手机端弹窗统一成「网银 App 表单页」形态：
 *   底部弹出全宽面板 + 顶部圆角 + 内容区滚动 + 底部按钮避开手势条，
 *   表单一律单列。全部规则只在 ≤768px 生效，桌面端一行不改。
 * ================================================================== */
@media (max-width: 768px) {
  /* 只改弹窗（modal-overlay）。右侧详情抽屉（drawer-overlay）本来就是
     justify-content:flex-end + 面板 height:100%，这里若给它 align-items:flex-end
     会把面板高度从「撑满」压成「随内容收缩」，抽屉就废了 —— 别动它。 */
  .modal-overlay {
    padding: 0;
    align-items: flex-end;          /* 面板贴底：App 底部弹层（bottom sheet）形态 */
  }
  .modal {
    width: 100vw !important;        /* 覆盖内联 width:720px 之类（须 !important） */
    height: auto;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px));
    border-radius: var(--radius) var(--radius) 0 0;
    animation: sheet-up .2s ease-out;
  }
  .drawer { width: 100vw !important; }
  .modal-foot {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));  /* 避开 iPhone 手势条 */
  }
  /* 弹窗 / 抽屉内表单一律单列：填表只有一条视线，不必左右找字段。
     选择器带 .modal 前缀抬高优先级，压过 ≤420px「统计卡两列」的特例（那条只该管仪表盘）。 */
  .modal .grid.grid-2, .modal .grid.grid-3, .modal .grid.grid-4, .modal .grid.grid-5,
  .drawer-overlay .grid.grid-2, .drawer-overlay .grid.grid-3,
  .drawer-overlay .grid.grid-4, .drawer-overlay .grid.grid-5 {
    grid-template-columns: 1fr;
  }
  .modal-body .form-help { font-size: 12px; }   /* 说明文字在窄屏上收紧一点 */
}
@keyframes sheet-up { from { transform: translateY(24px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }

/* 弹窗打开时锁背景滚动（ui.js modal() 挂 body.modal-open，计数到 0 才摘） */
body.modal-open { overflow: hidden; }

/* ==================================================================
 * v6.19 登录页「深蓝 × 金」豪华风（照用户提供的参考稿 1:1 重写为纯 CSS）
 *
 * 参考稿是 Tailwind CDN 版 —— 本项目零 npm/零外部依赖，所以全部工具类
 * 都在这里手写还原（背景流动光晕 / 金色粒子 / 品牌价值观卡片 / 玻璃登录卡）。
 * 只作用于 body.login-mode（登录路由），登录后的界面一概不受影响。
 * 移动端（≤1024px）品牌面板隐藏、登录卡全宽；输入框 16px 防 iOS 聚焦放大。
 * ================================================================== */
.login-page {
  position: fixed; inset: 0; z-index: 5;
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #0a0f1e 0%, #131d33 30%, #0c1929 60%, #0f1a30 100%);
  font-family: 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', sans-serif;
}
/* 缓慢流动的光晕（纯 CSS 动画） */
.login-page::before {
  content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(212, 175, 55, .06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(30, 58, 138, .12) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(212, 175, 55, .02) 0%, transparent 70%);
  animation: lx-bg-float 25s ease-in-out infinite;
}
@keyframes lx-bg-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(2%, 2%) rotate(1deg); }
  66% { transform: translate(-1%, 1%) rotate(-1deg); }
}
/* 金色粒子（login.js 动态生成 35 颗） */
.lx-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lx-particle {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: linear-gradient(135deg, #d4af37, #f4e4bc, #d4af37);
  box-shadow: 0 0 6px rgba(212, 175, 55, .6);
  animation: lx-particle-float linear infinite;
}
@keyframes lx-particle-float {
  0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 1; } 90% { opacity: 1; }
  100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
}
/* 角落装饰大圆 */
.lx-geo { position: absolute; border: 2px solid #d4af37; border-radius: 50%; opacity: .04; pointer-events: none; }
.lx-geo.g1 { width: 600px; height: 600px; top: -200px; left: -200px; }
.lx-geo.g2 { width: 400px; height: 400px; bottom: -100px; right: -100px; }

.lx-wrap {
  position: relative; z-index: 2; width: 100%; max-width: 960px;
  display: flex; border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
}

/* ---- 左侧品牌文化区 ---- */
.lx-brand {
  width: 48%; padding: 44px; display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(135deg, rgba(15, 23, 42, .6), rgba(10, 15, 30, .8));
  position: relative; overflow: hidden;
}
.lx-brand::before {
  content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, rgba(212, 175, 55, .3), transparent);
}
.lx-logo-row { display: flex; align-items: center; gap: 12px; }
.lx-logo-icon {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; position: relative;
  background: linear-gradient(135deg, #d4af37 0%, #f4e4bc 50%, #d4af37 100%);
  box-shadow: 0 8px 25px rgba(212, 175, 55, .35), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.lx-logo-icon::after { content: ''; position: absolute; inset: 2px; background: linear-gradient(135deg, #1e293b, #0f172a); border-radius: 10px; }
.lx-logo-icon span {
  position: relative; z-index: 1; font-size: 18px; font-weight: 700; letter-spacing: 2px;
  background: linear-gradient(135deg, #d4af37, #f4e4bc);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lx-logo-title { color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 1px; }
.lx-logo-sub { color: #64748b; font-size: 11px; letter-spacing: 3px; margin-top: 2px; }

.lx-values-title {
  font-size: 22px; font-weight: 700; letter-spacing: 1px; margin-bottom: 10px;
  background: linear-gradient(135deg, #d4af37 0%, #f4e4bc 50%, #d4af37 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lx-deco-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .25), transparent); }
.lx-deco-line.gold { width: 64px; background: linear-gradient(90deg, #d4af37, transparent); }
.lx-values-lead { color: #94a3b8; font-size: 13px; line-height: 1.8; margin: 12px 0 22px; }
.lx-value-card {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px; margin-bottom: 14px;
  border-radius: 10px; position: relative; overflow: hidden;
  background: linear-gradient(145deg, rgba(212, 175, 55, .05), rgba(212, 175, 55, .02));
  border: 1px solid rgba(212, 175, 55, .15);
  backdrop-filter: blur(10px);
  transition: all .4s cubic-bezier(.2, .8, .2, 1);
}
.lx-value-card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%;
  background: linear-gradient(180deg, #d4af37, #b8860b);
  transform: scaleY(0); transform-origin: top; transition: transform .4s ease;
}
.lx-value-card:hover { background: linear-gradient(145deg, rgba(212, 175, 55, .1), rgba(212, 175, 55, .05)); border-color: rgba(212, 175, 55, .3); transform: translateX(5px); }
.lx-value-card:hover::before { transform: scaleY(1); }
.lx-value-icon {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; position: relative;
  background: linear-gradient(135deg, rgba(212, 175, 55, .15), rgba(184, 134, 11, .1));
  border: 1px solid rgba(212, 175, 55, .25); color: #d4af37;
}
.lx-value-icon svg { width: 20px; height: 20px; }
.lx-pulse-ring { position: absolute; inset: -4px; border-radius: inherit; border: 1px solid rgba(212, 175, 55, .3); animation: lx-pulse 3s ease-out infinite; }
@keyframes lx-pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.lx-value-name { color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.lx-value-desc { color: #94a3b8; font-size: 12px; line-height: 1.7; }
.lx-slogan { color: #64748b; font-size: 12px; letter-spacing: 2px; margin-top: 16px; }

/* ---- 右侧登录卡 ---- */
.lx-card {
  width: 52%; padding: 44px; position: relative; overflow: hidden;
  background: linear-gradient(145deg, rgba(30, 41, 59, .9), rgba(15, 23, 42, .95));
  border: 1px solid rgba(212, 175, 55, .2);
  box-shadow: 0 25px 80px rgba(0, 0, 0, .4), 0 0 0 1px rgba(212, 175, 55, .08), inset 0 1px 0 rgba(255, 255, 255, .03);
  backdrop-filter: blur(20px);
}
.lx-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #d4af37, #f4e4bc, #d4af37, transparent);
}
.lx-corner { position: absolute; width: 40px; height: 40px; border-color: rgba(212, 175, 55, .25); }
.lx-corner.tl { top: 12px; left: 12px; border-top: 1px solid; border-left: 1px solid; }
.lx-corner.tr { top: 12px; right: 12px; border-top: 1px solid; border-right: 1px solid; }
.lx-corner.bl { bottom: 12px; left: 12px; border-bottom: 1px solid; border-left: 1px solid; }
.lx-corner.br { bottom: 12px; right: 12px; border-bottom: 1px solid; border-right: 1px solid; }

.lx-welcome { text-align: center; margin-bottom: 28px; }
.lx-welcome h1 { color: #fff; font-size: 24px; font-weight: 700; letter-spacing: 2px; margin-bottom: 8px; }
.lx-welcome p { color: #94a3b8; font-size: 13px; }
.lx-welcome .lx-deco-line { width: 64px; margin: 20px auto 0; }

.lx-label { display: block; color: #cbd5e1; font-size: 13px; font-weight: 500; letter-spacing: 1px; margin-bottom: 8px; }
.lx-group { position: relative; margin-bottom: 18px; }
.lx-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: rgba(212, 175, 55, .4); transition: color .3s ease; pointer-events: none;
}
.lx-group:focus-within .lx-icon { color: #d4af37; }
.lx-input {
  width: 100%; padding: 12px 16px 12px 46px; border-radius: 10px;
  font-size: 15px; color: #fff; letter-spacing: .5px;
  background: rgba(15, 23, 42, .5);
  border: 1px solid rgba(212, 175, 55, .15);
  transition: all .4s cubic-bezier(.2, .8, .2, 1);
  outline: none;
}
.lx-input::placeholder { color: #475569; }
.lx-input:focus {
  background: rgba(15, 23, 42, .7);
  border-color: rgba(212, 175, 55, .5);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .08), 0 4px 20px rgba(212, 175, 55, .1);
}
.lx-eye {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 6px; color: #64748b; line-height: 0;
}
.lx-eye:hover { color: #d4af37; }
.lx-eye svg { width: 18px; height: 18px; }

.lx-row { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 20px; }
.lx-remember { display: flex; align-items: center; cursor: pointer; color: #94a3b8; font-size: 13px; }
.lx-remember:hover { color: #cbd5e1; }
.lx-checkbox {
  appearance: none; width: 16px; height: 16px; margin: 0 9px 0 0; cursor: pointer; position: relative;
  border: 1.5px solid rgba(212, 175, 55, .35); border-radius: 4px; background: rgba(15, 23, 42, .5);
  transition: all .3s ease;
}
.lx-checkbox:checked { background: linear-gradient(135deg, #d4af37, #b8860b); border-color: #d4af37; }
.lx-checkbox:checked::after {
  content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: #0f172a; font-size: 10px; font-weight: 700;
}
.lx-forgot { color: rgba(212, 175, 55, .6); font-size: 13px; text-decoration: none; cursor: pointer; }
.lx-forgot:hover { color: #d4af37; }

.lx-btn {
  width: 100%; padding: 14px; border: none; border-radius: 10px; cursor: pointer;
  color: #0f172a; font-size: 15px; font-weight: 600; letter-spacing: 8px; text-indent: 8px;
  background: linear-gradient(135deg, #b8860b 0%, #d4af37 30%, #f4e4bc 50%, #d4af37 70%, #b8860b 100%);
  background-size: 200% 100%;
  box-shadow: 0 8px 30px rgba(212, 175, 55, .25), inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: all .4s cubic-bezier(.2, .8, .2, 1);
  position: relative; overflow: hidden;
}
.lx-btn::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
  transition: left .6s ease;
}
.lx-btn:hover { background-position: 100% 0; box-shadow: 0 12px 40px rgba(212, 175, 55, .35), inset 0 1px 0 rgba(255, 255, 255, .4); transform: translateY(-2px); }
.lx-btn:hover::before { left: 100%; }
.lx-btn:active { transform: translateY(0); }
.lx-btn:disabled { opacity: .7; cursor: default; transform: none; }

.lx-foot { margin-top: 28px; }
.lx-foot .lx-deco-line { margin-bottom: 18px; }
.lx-foot p { text-align: center; color: #64748b; font-size: 12px; letter-spacing: 1px; }

/* 入场动画 */
.lx-in { opacity: 0; animation: lx-fade-in .8s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes lx-fade-in { to { opacity: 1; } }
.lx-slide-left { transform: translateX(-30px); animation-name: lx-slide-l; }
@keyframes lx-slide-l { to { opacity: 1; transform: translateX(0); } }
.lx-slide-right { transform: translateX(30px); animation-name: lx-slide-r; }
@keyframes lx-slide-r { to { opacity: 1; transform: translateX(0); } }
.lx-d1 { animation-delay: .1s; } .lx-d2 { animation-delay: .2s; } .lx-d3 { animation-delay: .3s; }
.lx-d4 { animation-delay: .4s; } .lx-d5 { animation-delay: .5s; } .lx-d6 { animation-delay: .6s; } .lx-d7 { animation-delay: .7s; }

/* ---- 登录页移动端（≤1024px 品牌面板隐藏；≤768px 输入框 16px 防 iOS 放大） ---- */
@media (max-width: 1024px) {
  .lx-brand { display: none; }
  .lx-card { width: 100%; }
}
@media (max-width: 768px) {
  .login-page { padding: 14px; }
  .lx-card { padding: 30px 22px; }
  .lx-input { font-size: 16px; }   /* iOS：输入框 <16px 聚焦会放大整页 */
  .lx-btn { letter-spacing: 6px; text-indent: 6px; }
}