/* =====================================================================
   Lockify 管理后台样式 —— 暗色主题
   设计语言来自 Lockify 桌面端官方设计稿（GUI_Design/Local Lockify Design）：
   - 卡片/面板 #17171a · 次级表面 #1d1d21 · 边框 #2a2a2d
   - 主色 #007bff（hover #0069d9）· 错误 #ff6b6b
   - 多层投影 · 圆角 12/6/5 · 过渡 0.15s ease · 悬浮仅变色无位移
   - 排版：Fira Sans / Fira Code（本机已装则用，未装自动回退系统字体栈）
   无外部依赖，可完全离线运行（不引用任何外网字体/CDN，国内网络安全）。
   ===================================================================== */
:root {
  --bg: #0f1420;            /* 内容区背景（深蓝黑，替代原毛坯灰） */
  --sidebar-bg: #0b0f18;    /* 侧边栏（更深，拉开层次） */
  --panel: rgba(24, 28, 40, .88);   /* 面板（半透明玻璃感，透出背景光晕） */
  --surface: #1b2130;       /* 输入框/表头/次级表面 */
  --surface-2: #262d3f;     /* 悬浮/按压表面 */
  --line: #2a3142;          /* 边框 */
  --line-strong: #3d4660;   /* hover 边框 */
  --text: #ffffff;
  --muted: #9aa4b8;         /* 次级文字（≥6:1） */
  --faint: #66718a;         /* 弱化（placeholder/辅助） */
  --brand: #007bff;
  --brand-hover: #2b8fff;
  --brand-active: #0056b3;
  --ok: #3fb950;
  --ok-bg: rgba(63, 185, 80, .14);
  --warn: #d29922;
  --warn-bg: rgba(210, 153, 34, .15);
  --danger: #ff6b6b;
  --danger-bg: rgba(255, 107, 107, .13);
  --info: #58a6ff;
  --info-bg: rgba(88, 166, 255, .13);
  --radius-lg: 12px;        /* 面板/登录卡 */
  --radius-md: 8px;
  --radius-sm: 6px;         /* 按钮 */
  --radius-xs: 5px;         /* 输入 */
  --shadow: 0 2px 6px rgba(0, 0, 0, .18), 0 8px 24px rgba(0, 0, 0, .22), 0 16px 48px rgba(0, 0, 0, .18);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
  --glow-brand: 0 0 0 3px rgba(0, 123, 255, .35);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px; color: var(--text); line-height: 1.55;
  /* 深蓝黑底色 + 品牌色氛围光晕（告别毛坯灰） */
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(0, 123, 255, .16), transparent 62%),
    radial-gradient(900px 480px at -12% 112%, rgba(63, 185, 80, .09), transparent 58%),
    radial-gradient(700px 400px at 55% 118%, rgba(88, 166, 255, .07), transparent 60%),
    linear-gradient(180deg, #101624 0%, #0c111c 100%);
  background-attachment: fixed;
}
/* 背景网格画布（最底层，位于渐变背景之上、内容之下；鼠标移过网格避让） */
#grid-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* =====================================================================
   间距体系与通用组件（v1.2.260816.21xx 体验优化）
   ===================================================================== */
.search-bar { gap: 10px; align-items: center; }
.search-bar input, .search-bar select { min-height: 36px; }
.search-bar .btn { min-height: 36px; }
/* 操作按钮组（同一行多个按钮/表单的间距） */
.btn-group { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
table.grid .btn-group { gap: 5px; }
/* 头像组件（列表/详情展示用户） */
.avatar {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  background: rgba(0,123,255,.14); color: var(--brand); vertical-align: middle;
}
.avatar-sm { width: 22px; height: 22px; }
/* 用户/设备链接（人名实体可点击跳详情） */
.user-link { display: inline-flex; align-items: center; gap: 6px; color: #c8d0de; text-decoration: none; font-weight: 500; transition: color .15s ease; }
.user-link:hover { color: var(--brand); }
.user-link .avatar { color: var(--brand); }
/* 表格内链接实体 */
td a.link-entity, .chip.link-entity { color: var(--info); text-decoration: none; }
td a.link-entity:hover, .chip.link-entity:hover { color: #79b8ff; text-decoration: underline; }
/* 空状态（统一） */
.empty-state {
  grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 34px 20px;
  background: var(--panel); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg);
  font-size: 13px; line-height: 1.8;
}
.empty-state .empty-icon { color: var(--faint); margin-bottom: 6px; display: block; }
/* 统计卡可点击 */
a.stat { display: block; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
a.stat:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
a.stat .k, a.stat .v { color: inherit; }
a.stat:hover .v { color: var(--brand); }
/* 面板头右侧工具区 */
.panel-head .tools { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* 表格行内紧凑文本 */
td .sub { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* 面板玻璃质感（背景光晕与点阵透过半透明面板模糊呈现） */
.panel, .detail-card, .file-card, .stat, .login-card {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.sidebar {
  background: linear-gradient(180deg, rgba(12, 16, 26, .96), rgba(9, 12, 20, .96));
}
code, .mono, .sql-box, table.grid .mono { font-family: "Fira Code", Consolas, "SF Mono", "Courier New", monospace; }
/* 可点击元素统一指针（可访问性） */
a, button, select, label[for], input[type=checkbox], input[type=radio], input[type=submit] { cursor: pointer; }

/* =====================================================================
   全控件毛玻璃（v1.1.9：每个控件都有模糊底层）
   ===================================================================== */
input[type=text], input[type=password], input[type=datetime-local], input[type=number], input[type=date], select, textarea {
  background: rgba(27, 33, 48, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* 毛玻璃半透明底仅适用于 ghost 按钮；danger/warn 为实心底色（红底白字/黄底深字），
   不参与此规则，避免任何顺序下被半透明底覆盖（v1.4.260817.0312 修复） */
.btn-ghost { background: rgba(27, 33, 48, .55); }
.nav-item { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.nav-item:hover { background: rgba(255, 255, 255, .08); }
.nav-item.active { background: linear-gradient(90deg, rgba(0,123,255,.26), rgba(0,123,255,.1)); }
table.grid th {
  background: rgba(27, 33, 48, .65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.badge, .chip {
  background: rgba(27, 33, 48, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.badge-ok { background: rgba(63, 185, 80, .16); }
.badge-danger { background: rgba(255, 107, 107, .16); }
.badge-warn { background: rgba(210, 153, 34, .18); }
.badge-info { background: rgba(88, 166, 255, .16); }
.pager a {
  background: rgba(27, 33, 48, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.item {
  background: rgba(27, 33, 48, .6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.search-bar input { background: rgba(27, 33, 48, .72); }
.sql-box, .query-result { background: rgba(16, 18, 28, .8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.flash { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* =====================================================================
   模糊出现 / 消失动画（v1.1.9）
   ===================================================================== */
@keyframes lk-blur-in {
  from { opacity: 0; filter: blur(12px); transform: translateY(8px); }
  to   { opacity: 1; filter: blur(0);   transform: translateY(0); }
}
@keyframes lk-blur-out {
  from { opacity: 1; filter: blur(0);   transform: translateY(0); }
  to   { opacity: 0; filter: blur(12px); transform: translateY(-6px); }
}
.panel, .detail-card, .file-card, .stat, .item, .login-card {
  animation: lk-blur-in .45s cubic-bezier(.22, .8, .3, 1) both;
}
.blur-in  { animation: lk-blur-in  .35s cubic-bezier(.22, .8, .3, 1) both; }
.blur-out { animation: lk-blur-out .22s ease-in both; }
/* 控件 hover 反馈：轻微上浮 + 边框提亮（模糊已由底层承担，不重复动画） */
.btn, .file-card, .item, .nav-item, .pager a { transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
a { color: var(--info); text-decoration: none; }
a:hover { color: #79b8ff; text-decoration: none; }
code { font-family: Consolas, "SF Mono", "Courier New", monospace; font-size: 12px; background: rgba(255,255,255,.07); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; color: #e6edf3; }
::selection { background: rgba(0, 123, 255, .35); }

/* 滚动条（暗色） */
* { scrollbar-width: thin; scrollbar-color: #3a3a40 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #3a3a40; border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #4a4a52; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* 可访问性：键盘焦点可见 */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; box-shadow: var(--glow-brand);
}

/* 布局 */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 248px; background: var(--sidebar-bg); color: #aeb4bd;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  border-right: 1px solid var(--line);
}
.brand {
  display: flex; align-items: center; gap: 11px; padding: 18px 20px 14px;
}
/* 品牌区 Logo（v1.3：替代 CSS 圆点，与桌面端 encryptorlogo 同源） */
.brand-logo {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: block;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
}
.brand-name { font-size: 20px; font-weight: 700; letter-spacing: -0.4px; color: #fff; line-height: 1; }
.brand-version { font-size: 11px; color: var(--faint); letter-spacing: .2px; line-height: 1; margin-top: 3px; }
.nav { flex: 1; padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-md);
  color: #aeb4bd; font-size: 13.5px; line-height: 1;
  transition: background-color .15s ease, color .15s ease;
}
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .85; }
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.active { background: linear-gradient(90deg, rgba(0,123,255,.22), rgba(0,123,255,.08)); color: #fff; box-shadow: inset 2px 0 0 var(--brand); }
.nav-item.active svg { color: var(--brand); opacity: 1; }
.nav-group { padding: 14px 12px 4px; font-size: 11px; color: var(--faint); letter-spacing: .6px; }
.sidebar-foot { padding: 12px 10px; border-top: 1px solid var(--line); }
.whoami { padding: 6px 12px; font-size: 13px; color: #aeb4bd; display: flex; align-items: center; gap: 8px; }
.role-badge { font-size: 11px; padding: 1px 8px; border-radius: 20px; font-weight: 600; }
.role-superadmin { background: rgba(124, 58, 237, .25); color: #c4b5fd; }
.role-admin { background: var(--info-bg); color: var(--info); }
.role-operator { background: rgba(255,255,255,.09); color: #cbd5e1; }

.main { flex: 1; padding: 0 30px 40px; min-width: 0; }
.topbar { padding: 22px 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.topbar h1 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.3px; }
.topbar .sub { color: var(--muted); font-size: 12.5px; }

/* 面板与表格 */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: 18px; overflow: hidden; }
.panel-head { padding: 13px 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.panel-head h2 { margin: 0; font-size: 14.5px; font-weight: 600; }
.panel-head h2 code { font-size: 12.5px; }
.panel-body { padding: 16px 18px; }
table.grid { width: 100%; border-collapse: collapse; }
table.grid th, table.grid td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 13px; }
table.grid th { background: var(--surface); font-weight: 600; color: var(--muted); white-space: nowrap; }
table.grid tr:last-child td { border-bottom: none; }
table.grid tr:hover td { background: rgba(255,255,255,.03); }
table.grid .num { font-variant-numeric: tabular-nums; }
.mono { font-family: Consolas, "SF Mono", "Courier New", monospace; font-size: 12px; word-break: break-all; }

/* 徽章 */
.badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-muted { background: rgba(255,255,255,.08); color: var(--muted); }
.badge-info { background: var(--info-bg); color: var(--info); }

/* 按钮：悬浮仅变色，无位移 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 8px 16px; font-size: 13px; cursor: pointer; line-height: 1.2;
  background: var(--brand); color: #fff; font-family: inherit;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--brand-hover); }
.btn:active { background: var(--brand-active); }
/* 危险/警示按钮：实心底 + 白字（v1.4 起）。
   !important 强制锁定：无视任何顺序/残留规则/旧缓存覆盖，默认即红底白字 */
.btn-danger { background: var(--danger) !important; color: #fff !important; border-color: var(--danger); }
.btn-danger:hover { background: #ff8080 !important; color: #fff !important; border-color: #ff8080; }
.btn-danger:active { background: #d94f4f !important; }
.btn-warn { background: var(--warn) !important; color: #131316 !important; border-color: var(--warn); }
.btn-warn:hover { background: #e0a82e !important; color: #131316 !important; border-color: #e0a82e; }
.btn-warn:active { background: #c08a1d !important; }
.btn-ghost { background: transparent; color: #c6cbd3; border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface-2); color: #fff; }
.btn-sm { padding: 5px 11px; font-size: 12px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* 表单 */
input[type=text], input[type=password], input[type=datetime-local], input[type=number], select, textarea {
  border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 8px 11px; font-size: 13px;
  font-family: inherit; background: var(--surface); color: var(--text); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,123,255,.18); }
select { appearance: auto; }
select option { background: var(--panel); color: var(--text); }
textarea { width: 100%; min-height: 90px; resize: vertical; }
.form-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.form-row label { min-width: 96px; color: var(--muted); font-size: 13px; }
.search-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.search-bar input { min-width: 200px; }

/* 提示 */
.flash { padding: 10px 14px; border-radius: var(--radius-md); margin-bottom: 14px; font-size: 13px; border: 1px solid transparent; }
.flash-ok { background: var(--ok-bg); color: var(--ok); border-color: rgba(63,185,80,.25); }
.flash-err { background: var(--danger-bg); color: var(--danger); border-color: rgba(255,107,107,.3); }
.flash-warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(210,153,34,.35); }

/* 统计卡 */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 15px 18px; box-shadow: var(--shadow-sm); transition: border-color .15s ease; }
.stat:hover { border-color: var(--line-strong); }
.stat .k { color: var(--muted); font-size: 12px; }
.stat .v { font-size: 26px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.stat .v.danger { color: var(--danger); }
.stat .v.ok { color: var(--ok); }
.stat .v.info { color: var(--info); }

/* 趋势条形图 */
.bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding-top: 8px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bar { width: 100%; max-width: 42px; background: linear-gradient(180deg, #2f86ff, var(--brand)); border-radius: 4px 4px 0 0; min-height: 2px; }
.bar.blocked { background: linear-gradient(180deg, #ff8a8a, var(--danger)); }
.bar-label { font-size: 11px; color: var(--muted); }

/* 分页 */
.pager { display: flex; gap: 8px; align-items: center; padding: 12px 18px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }
.pager a { display: inline-block; padding: 4px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: #c6cbd3; background: transparent; transition: background-color .15s ease, color .15s ease; }
.pager a:hover { background: var(--surface-2); color: #fff; }

/* 登录页 */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 24px; }
.login-card { width: 400px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px 36px 32px; box-shadow: var(--shadow); animation: lk-blur-in .3s cubic-bezier(.22, .8, .3, 1) both; }
.login-brand { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.login-brand-name { font-size: 26px; font-weight: 700; letter-spacing: -0.6px; color: #fff; line-height: 1; }
.login-brand-version { font-size: 11px; color: var(--faint); letter-spacing: .2px; }
.login-card .sub { color: var(--muted); margin-bottom: 24px; font-size: 13px; }
.login-card .form-row { flex-direction: column; align-items: stretch; gap: 6px; margin-bottom: 16px; }
.login-card .form-row label { min-width: 0; font-size: 12.5px; }
.login-card .form-row input { padding: 10px 12px; font-size: 14px; }
.login-card .btn { width: 100%; padding: 11px; font-size: 14px; }
.login-card .btn + .btn { margin-top: 10px; }
.login-card .hint { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); line-height: 1.8; }
.login-card .hint code { font-size: 11px; }
.login-card .flash { margin-bottom: 18px; }

/* 数据库管理 */
.sql-box { width: 100%; min-height: 90px; font-family: Consolas, "SF Mono", monospace; font-size: 13px; }
.query-result { max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }

/* 尊重系统减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =====================================================================
   二级详情页（v1.1.8：文件/设备/用户详情）
   ===================================================================== */
.back-bar { margin-bottom: 12px; }
.back-link { color: var(--muted); font-size: 13px; transition: color .15s ease; }
.back-link:hover { color: var(--text); }
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.detail-title h1 { margin: 0 0 8px; font-size: 22px; font-weight: 700; letter-spacing: -0.3px; word-break: break-all; }
.detail-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* 二级详情页：卡片竖排单列列表（v1.1.9，自上而下排列，非并列） */
.detail-grid { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.detail-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.detail-card-head { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.detail-card-head h2 { margin: 0; font-size: 14px; font-weight: 600; }
.kv { padding: 10px 16px 14px; }
.kv-row { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); align-items: flex-start; }
.kv-row:last-child { border-bottom: none; }
.kv-k { flex: 0 0 86px; color: var(--muted); font-size: 12.5px; padding-top: 7px; }
.kv-v { flex: 1; min-width: 0; font-size: 13px; word-break: break-all; }
.kv-v input[type=text], .kv-v input[type=number], .kv-v input[type=datetime-local], .kv-v select { width: 100%; max-width: 320px; }
.kv-v textarea { max-width: 420px; }

/* =====================================================================
   列表 → 详情交互（v1.1.8）
   ===================================================================== */
tr.row-link { cursor: pointer; transition: background-color .15s ease; }
tr.row-link:hover td { background: rgba(255,255,255,.04); }
.view-toggle { display: inline-flex; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px; background: var(--surface); margin-left: auto; }
.view-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px;
  border: none; background: transparent; color: var(--muted); border-radius: 4px; padding: 0;
  transition: background-color .15s ease, color .15s ease;
}
.view-btn:hover { background: var(--surface-2); color: var(--text); }
.view-btn.active { background: var(--brand); color: #fff; }

/* 文件卡片视图 */
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 18px; }
.file-card {
  display: flex; flex-direction: column; gap: 8px; padding: 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); text-decoration: none; color: var(--text);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.file-card:hover { border-color: var(--brand); color: var(--text); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.file-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.file-card-icon { color: var(--brand); opacity: .9; flex-shrink: 0; }
.file-card-badges { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.file-card-name { font-weight: 600; font-size: 14px; word-break: break-all; line-height: 1.4; }
.file-card-meta { color: var(--muted); font-size: 12px; line-height: 1.7; word-break: break-all; }
.file-card-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); color: var(--info); font-size: 12px; }
.empty-state { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 30px; background: var(--panel); border: 1px dashed var(--line); border-radius: var(--radius-lg); }

/* =====================================================================
   卡片式列表（v1.1.8：打开记录/登录记录/设备/文件列表）
   ===================================================================== */
.item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  transition: border-color .15s ease, background-color .15s ease;
}
.item:last-child { margin-bottom: 0; }
.item:hover { border-color: var(--line-strong); }
.item-main { flex: 1; min-width: 0; }
.item-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; font-weight: 600; word-break: break-all; }
.item-title-id { color: var(--muted); font-weight: 400; font-size: 12px; }
.item-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: 12.5px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 20px;
  color: #c8d0de; font-size: 12px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.chip svg { flex-shrink: 0; opacity: .7; }
.chip.link { color: var(--info); text-decoration: none; }
.chip.link:hover { color: #79b8ff; border-color: var(--info); }
a.item { text-decoration: none; color: var(--text); }
a.item:hover { border-color: var(--brand); }
.item-link { cursor: pointer; }

/* 响应式 */
@media (max-width: 860px) {
  .app { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; border-right: none; border-bottom: 1px solid var(--line); }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav-group { display: none; }
  .sidebar-foot { display: flex; align-items: center; justify-content: space-between; }
  .main { padding: 0 16px 30px; }
  .file-grid { grid-template-columns: 1fr; }
  .kv-k { flex-basis: 72px; }
}

/* =====================================================================
   全站深度优化（v1.2.260817：修复外网字体阻塞 + 体验/性能打磨）
   ===================================================================== */
/* 滚动条占位稳定：内容出现/消失时不再横向抖动 */
html { scrollbar-gutter: stable; }

/* 输入控件统一高度（与 search-bar 36px 对齐，表单行不再高低不平） */
input[type=text], input[type=password], input[type=datetime-local], input[type=number], input[type=date], select { min-height: 36px; }
textarea { min-height: 90px; }

/* 按钮内图标对齐（svg 图标与文字基线一致） */
.btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.btn-sm svg { width: 12px; height: 12px; }

/* 正文内容链接 hover 显示下划线（按钮/导航/卡片等自有反馈的元素排除） */
.panel-body p a:hover, .kv-v a:hover, .flash a:hover, .login-card .hint a:hover,
.item-sub a.chip:hover, .file-card-meta a:hover { text-decoration: underline; }

/* 键盘焦点覆盖到交互卡片与可点击行（原先只有基础控件） */
a.stat:focus-visible, a.item:focus-visible, a.file-card:focus-visible, a.user-link:focus-visible,
tr.row-link:focus-visible, .view-btn:focus-visible, .pager a:focus-visible {
  outline: none; box-shadow: var(--glow-brand); border-radius: var(--radius-sm);
}

/* 危险操作区（彻底删除/清空等 irreversible 区块的视觉警示） */
.danger-zone { border-color: rgba(255, 107, 107, .38); }
.danger-zone .detail-card-head, .danger-zone .panel-head { border-bottom-color: rgba(255, 107, 107, .22); }
.danger-zone .detail-card-head h2, .danger-zone .panel-head h2 { color: var(--danger); }

/* 长列表可滚动面板（可选：views 里给 .panel 加 panel--scroll 即获得 sticky 表头）
   用于打开记录/登录记录等长表，避免整页滚动丢失表头 */
.panel.panel--scroll { max-height: 560px; overflow-y: auto; }
.panel--scroll table.grid th { position: sticky; top: 0; z-index: 1; }
.panel--scroll .panel-head { position: sticky; top: 0; z-index: 2; background: rgba(15, 20, 32, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* 小元素毛玻璃降载：chip/badge/pager/nav 数量多（长列表页数百个），
   blur 6px→3px 视觉几乎无差、GPU 合成开销显著降低；面板级 14px 保留 */
.badge, .chip { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.pager a, .nav-item { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* 空状态图标放大（原来继承 13px 正文，观感弱） */
.empty-state .empty-icon { font-size: 26px; }

/* 中屏适配（860~1100px：详情页标题区提前换行、文件卡收窄） */
@media (max-width: 1100px) {
  .detail-head { flex-direction: column; align-items: flex-start; }
  .file-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .stats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

/* =====================================================================
   v1.3 组件与视觉升级：品牌 Logo / 页面过渡 veil / 后台加载指示 /
   Toast / Modal / whoami 卡片 / 主按钮轻渐变
   ===================================================================== */
/* 品牌标识可点击 */
a.brand { text-decoration: none; color: inherit; }
a.brand:hover .brand-name { color: var(--brand-hover); }

/* ---- 页面过渡 veil：全屏加载圈，模糊进出场 ---- */
#lk-nav-veil {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 14, 22, .55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; pointer-events: all; visibility: hidden;
}
#lk-nav-veil.lk-veil-show {
  opacity: 1; visibility: visible;
  transition: opacity .18s ease, visibility .18s;
  animation: lk-blur-in .28s cubic-bezier(.22, .8, .3, 1) both;
}
#lk-nav-veil.lk-veil-hide {
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
  animation: lk-blur-out .3s ease-in both;
}
.lk-veil-ring {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid rgba(0, 123, 255, .22);
  border-top-color: var(--brand);
  animation: lk-spin .8s linear infinite;
}
@keyframes lk-spin { to { transform: rotate(360deg); } }

/* ---- 右下角后台加载指示 pill ---- */
.lk-bgload {
  position: fixed; right: 22px; bottom: 22px; z-index: 1900;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 16px; border-radius: 24px;
  background: rgba(16, 20, 32, .82);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--muted); font-size: 12.5px;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
}
.lk-bgload.on { opacity: 1; transform: translateY(0); }
.lk-bgload-ring {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid rgba(0, 123, 255, .25);
  border-top-color: var(--brand);
  animation: lk-spin .8s linear infinite;
}

/* ---- Toast ---- */
.lk-toasts {
  position: fixed; top: 20px; right: 20px; z-index: 2100;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.lk-toast {
  padding: 10px 16px; border-radius: var(--radius-md); font-size: 13px;
  background: rgba(16, 22, 34, .92); color: #e6edf3;
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  animation: lk-blur-in .3s cubic-bezier(.22, .8, .3, 1) both;
  max-width: 320px; word-break: break-all;
}
.lk-toast.ok { border-color: rgba(63, 185, 80, .45); color: #7ee2a0; }
.lk-toast.err { border-color: rgba(255, 107, 107, .5); color: #ffa3a3; }
.lk-toast.lk-toast-out { animation: lk-blur-out .24s ease-in both; }

/* ---- Modal ---- */
.lk-modal-mask {
  position: fixed; inset: 0; z-index: 2200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(8, 11, 18, .5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: lk-fade .18s ease both;
}
@keyframes lk-fade { from { opacity: 0; } to { opacity: 1; } }
.lk-modal-mask.lk-modal-out { animation: lk-fade .2s ease reverse both; }
.lk-modal {
  width: 100%; max-width: 440px; max-height: 84vh; overflow: auto;
  background: rgba(20, 25, 38, .96);
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: lk-blur-in .28s cubic-bezier(.22, .8, .3, 1) both;
}
.lk-modal-wide { max-width: 560px; }
.lk-modal-title {
  padding: 15px 20px 0; font-size: 15px; font-weight: 700; color: var(--text);
}
.lk-modal-danger .lk-modal-title { color: var(--danger); }
.lk-modal-body { padding: 12px 20px 4px; font-size: 13.5px; color: #c8d0de; line-height: 1.6; }
.lk-modal-body .lk-modal-text { white-space: pre-wrap; word-break: break-all; }
.lk-modal-body label { display: block; margin: 10px 0 5px; font-size: 12.5px; color: var(--muted); }
.lk-modal-body input[type=text], .lk-modal-body input[type=password],
.lk-modal-body input[type=number], .lk-modal-body input[type=datetime-local],
.lk-modal-body select, .lk-modal-body textarea { width: 100%; }
.lk-modal-body textarea { min-height: 72px; }
/* 弹窗高度拖拽把手（长表单弹窗用，如「分类与合集管理」）：拖动调滚动区高度，双击恢复默认 */
.doc-modal-resizer {
  height: 16px; margin: 4px -20px 0; cursor: ns-resize;
  display: flex; align-items: center; justify-content: center;
  border-top: 1px dashed var(--line);
}
.doc-modal-resizer span {
  width: 64px; height: 4px; border-radius: 2px; background: var(--line-strong);
  transition: background-color .15s ease;
}
.doc-modal-resizer:hover span, .doc-modal-resizer:active span { background: var(--brand); }
.lk-modal-err { color: var(--danger); font-size: 12px; min-height: 16px; margin-top: 6px; }
.lk-modal-foot {
  display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 16px;
}
/* 弹窗内快捷选项（封禁时长等） */
.lk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.lk-chip {
  padding: 5px 12px; border-radius: 18px; font-size: 12.5px;
  background: rgba(27, 33, 48, .8); border: 1px solid var(--line); color: #c8d0de;
  cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.lk-chip:hover { border-color: var(--line-strong); color: #fff; }
.lk-chip.on { background: rgba(0, 123, 255, .18); border-color: var(--brand); color: #fff; }
/* 弹窗内 docID 展示与复制 */
.lk-docid {
  display: flex; align-items: center; gap: 8px; margin: 8px 0;
  padding: 8px 10px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
  background: rgba(16, 18, 28, .6);
}
.lk-docid code { flex: 1; word-break: break-all; background: none; border: none; padding: 0; font-size: 12px; color: #9ecbff; }

/* ---- 侧边栏 whoami 卡片化（v1.3） ---- */
.sidebar-foot { padding: 10px; }
.whoami {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px;
  background: rgba(27, 33, 48, .55); border: 1px solid var(--line);
  border-radius: var(--radius-md); font-size: 13px; color: #c8d0de;
}
.whoami .avatar { width: 28px; height: 28px; }
.whoami-main { flex: 1; min-width: 0; }
.whoami-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.whoami-role { display: flex; gap: 6px; margin-top: 3px; }

/* ---- 主按钮轻渐变 + 微投影（v1.3 视觉升级） ---- */
.btn {
  background: linear-gradient(180deg, #1a8aff, var(--brand));
  box-shadow: 0 2px 10px rgba(0, 123, 255, .22);
}
.btn:active { background: var(--brand-active); box-shadow: none; }

/* 减弱动效：veil/pill/toast/modal 全部直切 */
@media (prefers-reduced-motion: reduce) {
  #lk-nav-veil, .lk-bgload, .lk-toast, .lk-modal, .lk-modal-mask { animation: none !important; transition: none !important; }
  .lk-veil-ring, .lk-bgload-ring { animation-duration: 1.6s !important; }
}

/* ---- 面包屑（v1.3：真实来源链，各段可点） ---- */
.crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  margin-top: 7px; font-size: 12.5px; color: var(--faint);
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }
.crumbs-sep { color: var(--faint); opacity: .7; }
.crumbs-cur { color: var(--muted); font-weight: 600; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 分页器 v1.4（render_pager）：页码组 + 当前页高亮 + 每页条数 ---- */
.pager { gap: 6px; flex-wrap: wrap; }
.pager-total { color: var(--faint); font-size: 12.5px; margin-right: 4px; }
.pager-cur {
  display: inline-block; padding: 4px 12px; border-radius: var(--radius-sm);
  background: var(--brand); color: #fff; font-weight: 600;
}
.pager .pager-cur { border: none; }
.pager-size { margin-left: auto; color: var(--faint); font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.pager-size select { min-height: 28px; padding: 3px 8px; font-size: 12.5px; }
/* 表头排序（v1.4） */
th a.sort-col { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; }
th a.sort-col:hover { color: #fff; }
.sort-hint { opacity: .35; font-size: 11px; }
.sort-on { color: var(--brand); font-size: 11px; }