/* 短链系统 自定义样式（日/夜双主题：配色由本地 arco.css 变量驱动，body[arco-theme='dark'] 时自动切换夜间） */

/* 全局 border-box：自定义元素（.page/.login-wrap 等）的 padding/border 计入尺寸，
   避免内容盒（content-box）把内边距加在外面导致溢出视口 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body, #app { height: 100%; }
body {
  margin: 0;
  overflow: hidden; /* 整页不滚动：滚动收敛到后台内容区 */
  background: var(--color-bg-1, #f7f8fa);
  color: var(--color-text-1, #1d2129);
  font-family: system-ui, -apple-system, 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  font-size: 14px;
}

/* ===== 夜间配色（对齐参考站：页面背景亮于面板，面板 #17171a，圆角 8px） ===== */
body[arco-theme='dark'] {
  --color-bg-1: #373739;
  --color-bg-2: #17171a;
  --color-border-2: #303134;
  --color-text-1: rgba(255, 255, 255, 0.9);
  --color-text-2: rgba(255, 255, 255, 0.7);
  --color-text-3: rgba(255, 255, 255, 0.45);
}

/* ===== 布局工具类 ===== */
.flex { display: flex; }
.flex-1 { flex: 1 1 auto; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.w-full { width: 100%; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }
.text-base { font-size: 15px; }
.text-lg { font-size: 17px; }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt16 { margin-top: 16px; }

/* ===== 移动端卡片列表（参考站窄屏排版：标题行 / 短链行 / 元信息行 / 操作行） ===== */
.mobile-list .m-item {
  padding: 14px 2px;
  border-bottom: 1px solid var(--color-border-1, #e5e6eb);
}
.mobile-list .m-item:last-of-type { border-bottom: none; }
.m-title {
  font-weight: 500;
  font-size: 14px;
  color: var(--color-text-1, #1d2129);
}
.m-link { margin: 6px 0 2px; }
.m-link a { max-width: calc(100% - 34px); }
.m-meta {
  color: var(--color-text-3, #86909c);
  font-size: 12px;
  display: flex;
  gap: 12px;
  margin: 4px 0 2px;
}
.m-actions { display: flex; align-items: center; gap: 2px; margin-top: 6px; }
.m-page-bar { display: flex; justify-content: center; padding: 14px 0 2px; }
.m-empty { text-align: center; color: var(--color-text-3, #86909c); padding: 24px 0; }

/* 内容区全宽自适应 */
.page { width: 100%; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
}

/* ===== 登录页（日间渐变；夜间跟随主题变量） ===== */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #eef3ff, #f7f8fa);
}
.login-card {
  width: 380px;
  background: var(--color-bg-2, #ffffff);
  box-shadow: 0 10px 40px rgba(29, 33, 41, 0.08);
}
body[arco-theme='dark'] .login-wrap {
  background: radial-gradient(1200px 600px at 20% 0%, rgba(22, 93, 255, 0.16), transparent 60%),
    linear-gradient(160deg, var(--color-bg-2, #161b22), var(--color-bg-1, #0d1117));
}

/* ===== 未找到页 ===== */
.nf-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== 安装向导（独立整页，保持亮色） ===== */
.install-wrap {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 48px 16px;
  background: linear-gradient(160deg, #eef3ff, #f5f7fa);
  color: #1d2129;
}
.install-card { width: 100%; max-width: 760px; box-shadow: 0 10px 40px rgba(29, 33, 41, 0.08); }

/* 安装完成页密钥展示 */
.secret-list { background: #f7f8fa; border-radius: 8px; padding: 12px 16px; color: #1d2129; }
.secret-row { display: flex; justify-content: space-between; padding: 6px 0; flex-wrap: wrap; gap: 8px; }
.secret-label { color: #86909c; }

/* ===== 后台布局（固定视口高度：顶栏/侧栏固定，仅内容区滚动） ===== */
.console-layout {
  height: 100vh;
  display: flex;
  overflow: hidden;
}
.console-layout > .arco-layout {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.console-sider .brand {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
}
.console-header {
  height: 56px;
  padding: 0 16px;
  background: var(--color-bg-2, #ffffff);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border-2, #e5e6eb);
}
.console-content {
  padding: 16px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 内容面板化：外框为矩形带圆角；宽度自适应（块级自动，永不超出视口）；
   min-height 精确扣除：顶栏 56 + 面板上下外边距 32 + 面板自身边框 2 */
.console-content .page {
  background: var(--color-bg-2, #ffffff);
  border: 1px solid var(--color-border-2, #e5e6eb);
  border-radius: 8px;
  padding: 16px;
  min-height: calc(100vh - 90px);
  overflow-x: auto;
}

/* 表格固定布局：列宽严格执行，长内容在单元格内省略（防止列间重叠），
   单元格内边距提供与面板边缘的安全距离 */
.console-content .page .arco-table table {
  table-layout: fixed;
}
.console-content .page .arco-table .arco-table-td,
.console-content .page .arco-table .arco-table-th {
  overflow: hidden;
}

/* 扁平化包裹层：视图内直接子级的 arco-card 仅作容器使用，去除边框/背景，
   避免与 .page 面板形成双层边框（仪表盘的统计小卡片为深层子级，不受影响） */
.console-content .page > .arco-card {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* 角色权限矩阵 */
.role-matrix { width: 100%; border-collapse: collapse; }
.role-matrix th, .role-matrix td {
  border-bottom: 1px solid var(--color-border-2, #e5e6eb);
  padding: 10px 8px;
}
.role-matrix th { background: var(--color-fill-1, #f7f8fa); }

.op-btn { padding: 0 4px; }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 移动端适配（≥768px 正常双列，小屏单列） */
@media (max-width: 768px) {
  .form-grid { grid-template-columns: 1fr; }
  .console-content { padding: 12px; }
}