/* ============================================================
   xg.20zxx.cn PC端 精品UI
   对标 suno.cn PC 设计语言
   ============================================================ */

/* 全局变量 */
:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-card: rgba(255, 255, 255, 0.03);
  --bg-card-hover: rgba(255, 255, 255, 0.05);
  --text-primary: #ffffff;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --accent-primary: #fd498f;
  --accent-secondary: #ff6b9d;
  --accent-gold: #ffb86c;
  --accent-purple: #8b5cf6;
  --border-color: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(253, 73, 143, 0.3);
}

/* 全局背景 */
body, html, #__nuxt, #app {
  background-color: var(--bg-primary) !important;
}

* {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "SF Pro Display", "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 主内容区背景 */
main, .layout-page {
  background-color: var(--bg-primary) !important;
}

/* 左侧导航背景 */
.el-aside,
.sidebar,
[class*="side-menu"],
[class*="left-menu"] {
  background-color: var(--bg-secondary) !important;
  border-right: 1px solid var(--border-color) !important;
}

/* ===== 按钮体系 ===== */

.el-button {
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.el-button--primary {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important;
  background-size: 200% 100% !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(253, 73, 143, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.el-button--primary:hover {
  transform: translateY(-1px) !important;
  background-position: 100% 0 !important;
  box-shadow: 0 8px 24px rgba(253, 73, 143, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* ===== 输入框 ===== */

.el-input__inner,
.el-textarea__inner {
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--border-color) !important;
  color: #fff !important;
  transition: all 0.3s ease !important;
  font-size: 14px !important;
}

.el-input__inner:focus,
.el-textarea__inner:focus {
  border-color: rgba(253, 73, 143, 0.5) !important;
  box-shadow: 0 0 0 4px rgba(253, 73, 143, 0.1) !important;
}

/* ===== 卡片 ===== */

.el-card,
[class*="card"] {
  border-radius: 14px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  transition: all 0.3s ease !important;
}

.el-card:hover,
[class*="card"]:hover {
  border-color: var(--border-hover) !important;
  background: var(--bg-card-hover) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

/* ===== 标签 ===== */

.el-tag {
  border-radius: 99px !important;
  padding: 0 12px !important;
  font-weight: 500 !important;
}

/* ===== 滚动条 ===== */

::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}
::-webkit-scrollbar-track {
  background: transparent !important;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 99px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(253, 73, 143, 0.4) !important;
}

/* ===== 文字选中 ===== */

::selection {
  background: rgba(253, 73, 143, 0.3) !important;
  color: #fff !important;
}

/* ===== 链接 ===== */

a {
  transition: color 0.2s ease !important;
}
a:hover {
  color: var(--accent-primary) !important;
}

/* ===== 菜单项 ===== */

.el-menu-item {
  border-radius: 8px !important;
  margin: 2px 8px !important;
  width: calc(100% - 16px) !important;
  transition: all 0.2s ease !important;
}

.el-menu-item.is-active {
  background: rgba(253, 73, 143, 0.12) !important;
  color: var(--accent-primary) !important;
  font-weight: 600 !important;
}

.el-menu-item:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* ===== Tab ===== */

.el-tabs__active-bar {
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)) !important;
  height: 3px !important;
  border-radius: 99px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.el-tabs__item.is-active {
  color: var(--accent-primary) !important;
  font-weight: 600 !important;
}

/* ===== 模态框 ===== */

.el-dialog {
  animation: dialogFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: linear-gradient(180deg, rgba(30, 30, 42, 0.98), rgba(20, 20, 30, 0.98)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4) !important;
}

@keyframes dialogFadeIn {
  from {
    opacity: 0;
    transform: translateY(-16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ===== 下拉菜单 ===== */

.el-dropdown-menu,
.el-select-dropdown,
.el-popper {
  animation: fadeInUp 0.2s ease !important;
  background: rgba(25, 25, 35, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== 消息提示 ===== */

.el-message {
  background: rgba(25, 25, 35, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(16px) !important;
}

/* ===== 徽章 ===== */

.el-badge__content {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important;
  border: none !important;
  font-weight: 600 !important;
}

/* ===== 分页器 ===== */

.el-pager li.active {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

.el-pager li {
  border-radius: 8px !important;
  margin: 0 2px !important;
  min-width: 32px !important;
  transition: all 0.2s ease !important;
}

.el-pager li:hover {
  color: var(--accent-primary) !important;
}

/* ===== 图片圆角 ===== */

img {
  border-radius: 8px !important;
}

/* ===== 进度条 ===== */

.el-slider__runway {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: 99px !important;
}

.el-slider__bar {
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)) !important;
  border-radius: 99px !important;
}

.el-slider__button {
  border-color: var(--accent-primary) !important;
  width: 16px !important;
  height: 16px !important;
  box-shadow: 0 2px 8px rgba(253, 73, 143, 0.4) !important;
}

/* ===== 底部播放条 ===== */

[class*="player"],
[class*="audio-bar"],
[class*="bottom-bar"] {
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  background: rgba(15, 15, 23, 0.92) !important;
  border-top: 1px solid var(--border-color) !important;
}

/* ===== 导航分组标题 ===== */

.pc-nav-group {
  user-select: none;
}

/* ===== 增强内容容器 ===== */

#pc-enhanced-wrapper {
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== 按钮点击反馈 ===== */

.el-button:active {
  transform: scale(0.97) !important;
  transition: transform 0.1s ease !important;
}