/* 全局CSS变量 */
:root {
  --bg-dark: #02030a;
  --panel-glass: rgba(8, 10, 26, 0.26);
  --panel-glass-soft: rgba(10, 14, 35, 0.26);
  --accent: #f5c84c;
  --accent-strong: #ffdd55;
  --accent-pink: #ff7bb0;
  --accent-blue: #4ac8ff;
  --accent-green: #65f7c4;
  --accent-red: #ff5c7a;
  --text-main: #f5f6ff;
  --text-sub: #a1a6d0;
  --border-subtle: rgba(255, 255, 255, 0.12);
}

/* 基础样式重置 */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg-dark);
  color: var(--text-main);
  overflow: hidden; /* 页面整体不滚动 */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* 背景粒子画布 */
#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 0, #1b2340 0, transparent 55%),
    radial-gradient(circle at 90% 100%, #211a38 0, transparent 60%),
    #02030a;
}

/* 主容器：四周留白 - 优化呼吸空间 */
.app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 88px); /* 减少头部高度 */
  margin: 40px 60px; /* 稍微减小边距 */
  padding: 14px 18px; /* 增加内边距，优化呼吸空间 */
  gap: 14px; /* 增加面板间距，优化呼吸空间 */
  border-radius: 28px; /* 增加圆角 */
  border: 1px solid rgba(255, 255, 255, 0.16); /* 增强边框 */
  background: radial-gradient(circle at 0 0, rgba(255,255,255,0.08), transparent 60%),
              radial-gradient(circle at 100% 100%, rgba(136,196,255,0.12), transparent 60%),
              rgba(0,0,0,0.48); /* 增强背景透明度 */
  backdrop-filter: blur(16px); /* 增强模糊效果 */
  box-shadow:
    0 0 50px rgba(0,0,0,0.95), /* 增强阴影 */
    0 0 140px rgba(136,196,255,0.4); /* 增强光晕效果 */
}

/* 大屏幕优化 */
@media (min-width: 1920px) {
  .app {
    margin: 50px 80px;
    padding: 18px 24px;
    gap: 18px;
    border-radius: 32px;
  }
}

/* 笔记本屏幕优化 */
@media (max-width: 1440px) {
  .app {
    margin: 36px 50px;
    height: calc(100vh - 80px);
    padding: 16px 20px;
    gap: 16px;
  }
}

/* 平板屏幕优化 */
@media (max-width: 1280px) {
  .app {
    margin: 32px 40px;
    height: calc(100vh - 72px);
    padding: 16px 18px;
    gap: 14px;
    border-radius: 26px;
  }
}

/* 小屏平板优化 */
@media (max-width: 1024px) {
  .app {
    margin: 28px 32px;
    height: calc(100vh - 64px);
    padding: 14px 16px;
    gap: 14px;
    border-radius: 24px;
  }
}

/* 大屏手机优化 */
@media (max-width: 900px) {
  .app {
    margin: 20px 20px;
    height: calc(100vh - 48px);
    padding: 14px 16px;
    gap: 14px;
    border-radius: 22px;
  }
}

/* 小屏手机优化 */
@media (max-width: 600px) {
  .app {
    margin: 8px 8px;
    height: calc(100vh - 20px);
    padding: 12px 14px;
    gap: 12px;
    border-radius: 16px;
    box-shadow:
      0 0 30px rgba(0,0,0,0.9),
      0 0 80px rgba(136,196,255,0.3);
  }
}

/* 超小屏幕优化 */
@media (max-width: 480px) {
  .app {
    margin: 4px 4px;
    height: calc(100vh - 12px);
    padding: 10px 12px;
    gap: 10px;
    border-radius: 12px;
  }
}

/* 水波纹效果 */
.ripple-target,
.btn,
.track-item,
.search-mini-item {
  position: relative;
  overflow: hidden;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(4,6,22,0.65);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(122,182,255,0.9), rgba(255,196,120,0.9));
  box-shadow: 0 0 8px rgba(130,190,255,0.9);
}