/* ============================================================
   全局样式文件
   职责：
   1. 设计令牌（CSS 变量）
   2. 字体定义
   3. 页面基础重置
   4. 全局元素默认样式
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root {
  /* 品牌色 */
  --color-primary:     #7B8ED8;
  --color-primary-50:  #7B8ED888;
  --color-success:     #10b981;
  --color-info:        #6366f1;

  /* 文字色 */
  --text-primary:      #ffffff;
  --text-secondary:    #eeeeee;
  --text-muted:        #c0c0c0;

  /* 背景色 */
  --bg-page:           transparent;
  --bg-card:           rgba(25, 30, 60, 0.45);
  --bg-overlay:        rgba(120, 130, 200, 0.12);

  /* 字体栈 */
  --font-body:         MapleMono, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:         'Courier New', 'Consolas', 'Monaco', monospace;

  /* 间距 */
  --space-xs:          4px;
  --space-sm:          8px;
  --space-md:          12px;
  --space-lg:          18px;
  --space-xl:          36px;

  /* 圆角 */
  --radius-sm:         4px;
  --radius-md:         8px;
  --radius-lg:         12px;
  --radius-xl:         24px;

  /* 阴影 */
  --shadow-sm:         0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md:         0 4px 20px rgba(0, 0, 0, 0.25);
  --shadow-glow:       0 2px 8px rgba(123, 142, 216, 0.25);

  /* 动效 */
  --transition-fast:   0.2s ease;
  --transition-base:   0.3s ease;
}

/* ---------- 自定义字体：MapleMono ---------- */
@font-face {
  font-family: 'MapleMono';
  src: local('MapleMono-NF-CN-ExtraBold'),
       local('MapleMono NF CN ExtraBold'),
       url('https://file.utac99645.top/font/MapleMono-NF-CN-ExtraBold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---------- 页面基础重置 ---------- */
html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100%;
  display: flex;
}

/* ---------- body 全局样式 ---------- */
body {
  font-family: var(--font-body);
  background-image: url("/assets/img/143937772_p2.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* 全局暗色遮罩：让白色文字在背景图浅色区域始终清晰可读 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10, 15, 40, 0.30) 0%,
    rgba(15, 20, 50, 0.20) 50%,
    rgba(10, 15, 40, 0.30) 100%
  );
  z-index: -1;
  pointer-events: none;
}

/* ---------- 应用根容器 ---------- */
#app {
  width: 100%;
  min-height: 100vh;
}

/* ---------- 图片全局样式 ----------
   注意：此规则会作用于所有 img 标签，
   若组件内需要不同的图片样式，请使用 scoped style 覆盖
   ---------------------------------------------------------- */
img {
  width: 100vw;
  height: auto;
  border-radius: var(--radius-sm);
  object-fit: cover;
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-sm);
}

/* ---------- 标题样式 ---------- */
title, h1 {
  font-size: 2.8rem;
  color: #ffffff;
  text-align: center;
  margin-bottom: var(--space-xl);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow:
    0 0 12px rgba(123, 142, 216, 0.50),
    0 2px 8px rgba(0, 0, 0, 0.30);
}

/* ---------- 通知消息全局毛玻璃覆盖 ---------- */
.n-message {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  background: rgba(25, 30, 60, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
}

.n-message__icon {
  filter: drop-shadow(0 0 4px rgba(123, 142, 216, 0.40));
}

/* ---------- 通知弹窗全局毛玻璃覆盖 ---------- */
.n-notification {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  background: rgba(25, 30, 60, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
}

.n-notification__avatar {
  filter: drop-shadow(0 0 4px rgba(123, 142, 216, 0.40));
}

/* ---------- 卡片全局毛玻璃覆盖 ---------- */
.n-card,
.n-card.embedded,
.n-card--embedded {
  background: transparent !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: var(--shadow-md) !important;
  border-radius: var(--radius-lg);
}

.n-card--embedded .n-card__content-wrapper,
.n-card--embedded .n-card__main,
.n-card--embedded .n-card__content,
.n-card__main,
.n-card__content-wrapper,
.n-card__content {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* ---------- 按钮全局毛玻璃覆盖 ---------- */
.n-button {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 非透明按钮类型添加半透明背景，保留文字/边框主题色 */
.n-button:not(.n-button--ghost-type):not(.n-button--dashed-type):not(.n-button--text-type) {
  background: rgba(25, 30, 60, 0.5) !important;
}

.n-button:not(.n-button--ghost-type):not(.n-button--dashed-type):not(.n-button--text-type):hover {
  background: rgba(25, 30, 60, 0.7) !important;
}

.n-button:not(.n-button--ghost-type):not(.n-button--dashed-type):not(.n-button--text-type):active,
.n-button:not(.n-button--ghost-type):not(.n-button--dashed-type):not(.n-button--text-type):focus {
  background: rgba(25, 30, 60, 0.6) !important;
}

/* ---------- 通用动画 ---------- */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* ============================================================
   路由面包屑导航样式
   覆盖 naive-ui 默认样式以适配深色主题
   ============================================================ */

/* ---------- 面包屑容器 ---------- */
.n-breadcrumb {
  font-size: 14px;
  height: 4vh;
  padding: var(--space-sm) 14px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  backdrop-filter: blur(12px);
}

/* ---------- 面包屑链接 ---------- */
.n-breadcrumb-item__link {
  color: var(--text-secondary) !important;
  transition: color var(--transition-fast);
}

.n-breadcrumb-item__link:hover {
  color: var(--color-primary) !important;
}

/* ---------- 当前激活项 ---------- */
.n-breadcrumb-item--active .n-breadcrumb-item__link {
  color: var(--color-primary) !important;
  font-weight: 600;
}

/* ---------- 分隔符 ---------- */
.n-breadcrumb-item__separator {
  color: var(--color-primary-50) !important;
}