/* ═══════════════════════════════════════════════════════════════════
   app.css · 正式前端专属样式（原型没有的部分）

   base.css 负责「三版共用的结构与尺寸」，theme-*.css 负责「三版的气质」。
   这里只放**正式版才有的东西**：登录页、顶栏皮肤切换器、下拉菜单、
   登录态骨架、加载态、快捷键提示等。

   ⚠️ 纪律同 ui.js：这里不写任何硬编码颜色。凡是要随皮肤变的，一律 CSS 变量。
     登录页是例外 —— 它在任何皮肤下都要保持「能看清输入框」，故用半透明层 +
     变量背景，不写死底色。
   ═══════════════════════════════════════════════════════════════════ */

/* ── 登录页 ── */
.login-wrap {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--bg-app); z-index: 100;
}
.login-card {
  width: 100%; max-width: 380px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg, 14px); box-shadow: var(--shadow-modal);
  padding: 30px 28px 22px;
}
.login-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 24px; }
.brand-mark.lg { width: 44px; height: 44px; font-size: 16px; }
.login-title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.login-sub { font-size: 12px; color: var(--fg-dim); margin-top: 2px; }
.login-sub.err { color: var(--danger); font-weight: 600; }
.login-card .field { margin-bottom: 14px; }
.login-card .notice { margin: 12px 0; }
.btn.block { width: 100%; justify-content: center; }
.btn.lg { height: 40px; font-size: 14px; margin-top: 6px; }
.login-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--fg-dim);
}
.login-themes { display: inline-flex; gap: 6px; }

/* 皮肤小方块：三个色块代表该皮肤的底/面/主色 */
.theme-mini {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 7px;
  background: transparent; border: 1px solid var(--border); cursor: pointer;
}
.theme-mini i { width: 8px; height: 14px; border-radius: 2px; display: block; }
.theme-mini.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* ── 顶栏皮肤切换按钮 ── */
.skin-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px;
  background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm, 8px);
  color: var(--fg); font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.skin-btn:hover { background: var(--bg-hover); }
.skin-btn svg { width: 13px; height: 13px; opacity: .6; }
.skin-dots { display: inline-flex; gap: 2px; }
.skin-dots i { width: 7px; height: 12px; border-radius: 2px; display: block; border: 1px solid var(--border); }
.skin-dots.lg i { width: 10px; height: 18px; }
@media (max-width: 1100px) { .skin-name { display: none; } }

/* ── 顶栏用户按钮 ── */
.user-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 8px;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm, 8px);
  color: var(--fg); font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.user-btn:hover { background: var(--bg-hover); }
.user-btn svg { width: 13px; height: 13px; opacity: .6; }
.avatar {
  width: 24px; height: 24px; border-radius: 99px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  background: var(--accent); color: #fff; flex: 0 0 24px;
}
@media (max-width: 900px) { .user-name { display: none; } }

/* ── 下拉菜单 ── */
.dropdown-host { position: relative; display: inline-flex; }
.dropdown {
  position: absolute; right: 0; top: calc(100% + 7px); min-width: 210px; z-index: 60;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-md, 10px); box-shadow: var(--shadow-modal);
  padding: 6px; animation: ddIn .13s ease-out;
}
@keyframes ddIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dd-label { font-size: 11px; color: var(--fg-dim); padding: 5px 9px 6px; letter-spacing: .04em; }
.dd-head { padding: 9px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.dd-sep { height: 1px; background: var(--border); margin: 5px 0; }
.dd-item {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px;
  background: none; border: 0; border-radius: var(--r-sm, 8px); cursor: pointer;
  color: var(--fg); font-size: 13px; font-family: inherit; text-align: left;
}
.dd-item:hover { background: var(--bg-hover); }
.dd-item.on { background: var(--accent-soft); color: var(--accent); }
.dd-item.danger { color: var(--danger); }
.dd-item.danger:hover { background: var(--danger-soft, rgba(220, 38, 38, .1)); }
.dd-item svg { width: 15px; height: 15px; opacity: .75; flex: 0 0 15px; }
.dd-title { display: block; font-size: 13px; font-weight: 600; }
.dd-sub { display: block; font-size: 11.5px; color: var(--fg-dim); margin-top: 1px; }

/* ── 侧栏底部身份 ── */
.who { font-size: 12.5px; font-weight: 600; color: var(--fg); }
.nav-empty { padding: 16px 14px; font-size: 12px; color: var(--fg-dim); }

/* ── 加载 / 空态骨架 ── */
.loading-wrap {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 70px 0; color: var(--fg-dim); font-size: 13px;
}
.loading-wrap svg { width: 16px; height: 16px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 顶栏右侧插槽（各页面往里塞自己的操作按钮） ── */
.hdr-slot { display: inline-flex; align-items: center; gap: 7px; }

/* ── 详情页键值对 ── */
.kv { display: grid; grid-template-columns: 96px 1fr; gap: 7px 12px; font-size: 12.5px; }
.kv dt { color: var(--fg-dim); }
.kv dd { margin: 0; word-break: break-all; }

/* ── 表格内的小操作按钮组 ── */
.row-acts { display: inline-flex; gap: 4px; }
.row-acts .btn { padding: 0 7px; height: 24px; font-size: 11.5px; }

/* ── 统计卡网格：大屏 5 列，窄屏自适应 ── */
/* base.css 里 .g-* 只定义 grid-template-columns，display:grid 在 .grid 上；
   页面模板里为了简洁只写 g-*，所以这里补齐 display 与 gap */
.g-2, .g-3, .g-4, .g-5, .g-2-1, .g-1-2 { display: grid; gap: var(--gap); }
.g-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1400px) { .g-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .g-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 表格里的行内操作按钮：hover 才浮现的交互对运营不友好，直接显示 */
table.tbl .row-acts { opacity: 1; }

/* ── 简易 toast 之外的行内提示 ── */
.hint { font-size: 11.5px; color: var(--fg-dim); margin-top: 5px; }

/* ── 权限点勾选网格 ── */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 12px; }
.perm-group { margin-bottom: 14px; }
.perm-group-h { font-size: 12.5px; font-weight: 700; margin-bottom: 7px; display: flex; align-items: center; gap: 7px; }

/* ── 表格可点击行 ── */
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: var(--bg-hover); }

/* ── 代码块（env 片段、授权码明文） ── */
.code-block {
  font-family: var(--font-num); font-size: 12px; line-height: 1.7;
  background: var(--bg-app); border: 1px solid var(--border); border-radius: var(--r-sm, 8px);
  padding: 11px 13px; white-space: pre-wrap; word-break: break-all; max-height: 260px; overflow: auto;
}