/* ============================================================
   qgj-app.css — 控制台全新视觉「Aurora / 极光」v20261030
   设计语言：暗夜侧边栏 × 玻璃顶栏 × 极光渐变点缀
   作用域：.app-layout / .app-header / .sidebar / .content 内部，
   不影响官网首页与分享页。
   ============================================================ */

:root {
  --qa-primary: #7c5cff;
  --qa-primary-2: #5b7cff;
  --qa-accent: #22d3ee;
  --qa-ink: #0d1226;
  --qa-muted: #5c6579;
  --qa-side-bg: linear-gradient(180deg, #0d1228 0%, #101736 55%, #131b40 100%);
  --qa-side-text: #a4aecf;
  --qa-shadow-brand: 0 10px 26px -10px rgba(124, 92, 255, .55);
}

/* ---------- 图标替换基础样式（配合 qgj-app.js 注入的内联 SVG） ---------- */
.qgj-ic{display:inline-flex;flex:none;width:18px;height:18px;vertical-align:-3.5px}
.qgj-ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 整体布局 ---------- */
.app-layout{min-height:100vh;background:#f5f6fa}
.app-layout>.app-body{align-items:stretch}

/* ---------- 顶栏：玻璃拟态 + 吸顶 ---------- */
.app-header{
  position:sticky;top:0;z-index:100;
  background:rgba(13,18,40,.86)!important;
  -webkit-backdrop-filter:saturate(1.5) blur(16px);
  backdrop-filter:saturate(1.5) blur(16px);
  border-bottom:1px solid rgba(124,92,255,.2)!important;
  box-shadow:0 6px 20px -12px rgba(13,18,38,.5);
}
.app-header .left,.app-header .right{display:flex;align-items:center}
.app-header .menu-btn{
  border:none;background:transparent;cursor:pointer;font-size:0;
  width:34px;height:34px;border-radius:10px;color:#5c6579;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .18s ease,color .18s ease;
}
.app-header .menu-btn{color:#a4aecf}
.app-header .menu-btn:hover{background:rgba(124,92,255,.16);color:#c4b5ff}
.app-header .menu-btn .qgj-ic{width:19px;height:19px}
.app-header .logo{display:flex;align-items:center;margin-left:2px}
.app-header .logo img{height:30px;width:auto;transition:transform .25s ease}
.app-header .logo:hover img{transform:scale(1.04)}

/* 用户区 */
.app-header .user-box{
  display:flex;align-items:center;gap:9px;
  padding:5px 12px 5px 6px;border-radius:99px;cursor:default;
  border:1px solid transparent;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.app-header .user-box:hover{
  background:rgba(124,92,255,.14);
  border-color:rgba(124,92,255,.3);
  box-shadow:0 4px 14px -6px rgba(124,92,255,.4);
}
.app-header .user-box .avatar{
  width:30px;height:30px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(124,92,255,.4);
  box-shadow:0 0 0 2px rgba(124,92,255,.1);
}
.app-header .user-box .uname{font-size:13.5px;font-weight:600;color:#dfe4fb;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 侧边栏：暗夜极光 ---------- */
.sidebar{
  background:var(--qa-side-bg)!important;
  border-right:1px solid rgba(124,92,255,.14)!important;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.02);
}
.sidebar .nav{padding:12px 10px!important;display:flex;flex-direction:column;gap:3px}
.sidebar .nav-item{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:10px 12px!important;border-radius:11px!important;
  color:var(--qa-side-text)!important;font-size:13.5px;font-weight:500;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.sidebar .nav-item .ni{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;flex:none;font-size:0;color:#8a94bd;
  transition:color .18s ease;
}
.sidebar .nav-item .ni .qgj-ic{width:17px;height:17px}
.sidebar .nav-item:hover{background:rgba(124,92,255,.14);color:#e6e9ff!important;transform:translateX(2px)}
.sidebar .nav-item:hover .ni{color:#c4b5ff}
/* Vue Router 对 /user/index 与 /user/index?route=picture 均判为 exact-active，
   由 qgj-app.js 按完整 URL 精确标记 .qgj-cur，避免双高亮 */
.sidebar .nav-item.router-link-exact-active:not(.qgj-cur){background:transparent;color:var(--qa-side-text)!important;transform:none;box-shadow:none}
.sidebar .nav-item.active,
.sidebar .nav-item.qgj-cur{
  background:linear-gradient(135deg,#7c5cff 0%,#5b7cff 60%,#3fa9ff 130%)!important;
  color:#fff!important;font-weight:600;
  box-shadow:0 8px 20px -8px rgba(124,92,255,.65);
}
.sidebar .nav-item.active .ni,
.sidebar .nav-item.qgj-cur .ni{color:#fff}
.sidebar .nav-item.active::before,
.sidebar .nav-item.qgj-cur::before{
  content:"";position:absolute;left:-10px;top:20%;bottom:20%;width:3px;
  border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,#22d3ee,#7c5cff);
}
.sidebar .nav-divider{height:1px;margin:10px 12px!important;background:linear-gradient(90deg,rgba(124,92,255,.28),transparent)}

/* 存储空间卡片：暗色玻璃 */
.sidebar .storage{
  margin:14px 12px 16px!important;padding:15px!important;
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:15px!important;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 30px -18px rgba(0,0,0,.6);
}
.sidebar .storage .ss-row{font-size:13px;font-weight:600;color:#e8ebff}
.sidebar .storage .ss-row .badge{
  background:rgba(124,92,255,.25)!important;color:#c9b8ff!important;
  border-radius:99px;padding:1px 9px;font-size:12px;font-weight:600;
}
.sidebar .storage .ss-bar{
  height:7px!important;border-radius:99px!important;
  background:rgba(255,255,255,.1)!important;overflow:hidden;
}
.sidebar .storage .ss-fill{
  height:100%;border-radius:99px;
  background:linear-gradient(90deg,#7c5cff,#5b7cff 55%,#22d3ee)!important;
  transition:width .8s cubic-bezier(.22,1,.36,1);
  box-shadow:0 0 10px rgba(124,92,255,.5);
}
.sidebar .storage .ss-info{font-size:12px;color:#7d88b3}
.sidebar .ss-upgrade{
  display:block;text-align:center;margin-top:12px;padding:8px 0!important;
  border-radius:10px;font-size:13px;font-weight:600!important;
  color:#cdbcff!important;background:rgba(124,92,255,.14);
  border:1px dashed rgba(124,92,255,.45);
  transition:all .2s ease;
}
.sidebar .ss-upgrade:hover{
  color:#fff!important;background:linear-gradient(135deg,#7c5cff,#5b7cff);
  border-color:transparent;border-style:solid;
  box-shadow:0 8px 20px -8px rgba(124,92,255,.65);
}

/* ---------- 主内容区 ---------- */
.content{padding:22px 26px!important}
.content>.n-card,.content .dashboard{
  border-radius:16px!important;
  border:1px solid rgba(232,234,243,.95)!important;
  box-shadow:0 2px 6px rgba(13,18,38,.05),0 16px 40px -24px rgba(13,18,38,.2)!important;
  animation:qgj-fade-up .35s ease both;
}
@keyframes qgj-fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.content .n-card-header .n-card-header__main{font-weight:700;font-size:15.5px;color:#0d1226}

/* ---------- 文件管理（Dashboard） ---------- */
.dashboard .toolbar{padding:14px 18px!important}
.dashboard .toolbar .n-button{border-radius:10px!important;font-weight:500}
.dashboard .toolbar .n-button--primary-type{
  box-shadow:var(--qa-shadow-brand);
  transition:transform .15s ease,box-shadow .15s ease;
}
.dashboard .toolbar .n-button--primary-type:hover{transform:translateY(-1px);box-shadow:0 14px 30px -10px rgba(124,92,255,.6)}
.dashboard .crumbs{padding:12px 18px!important;font-size:13.5px}
.dashboard .crumb{font-weight:500}
.dashboard .row{transition:background .15s ease}
.dashboard .row:not(.head):hover{background:rgba(124,92,255,.045)}
.dashboard .row.sel{background:rgba(124,92,255,.09)!important}
.dashboard .row .fic{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(124,92,255,.1);color:#7c5cff}
.dashboard .row .c-act .n-button{border-radius:8px!important}
.dashboard .context-menu .list{border:1px solid rgba(232,234,243,.95)!important;border-radius:13px!important}
.dashboard .context-menu .list li:hover{background:rgba(124,92,255,.08)!important;color:#6a4df5!important}

/* ---------- 空状态 ---------- */
.n-empty{padding:36px 0}
.n-empty .n-empty__icon{opacity:1}
.n-empty .n-empty__description{color:#96a0bb;font-size:13.5px}
.n-empty .n-empty__icon img{opacity:.9}

/* ---------- 上传页 ---------- */
.upload .dz-icon,[class*="dz-icon"]{
  font-size:0!important;
  width:70px;height:70px;margin:0 auto 14px;
  border-radius:20px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(124,92,255,.12),rgba(34,211,238,.1));
  color:#7c5cff;
  box-shadow:inset 0 0 0 1px rgba(124,92,255,.22),0 12px 26px -14px rgba(124,92,255,.45);
}
.upload .dz-icon .qgj-ic,[class*="dz-icon"] .qgj-ic{width:34px;height:34px}
.upload .n-upload-dragger,
.n-upload-dragger{
  border:1.5px dashed rgba(124,92,255,.42)!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#fbfaff,#f5f6ff)!important;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.n-upload-dragger:hover{
  border-color:#7c5cff!important;
  background:linear-gradient(180deg,#f7f6ff,#eef3ff)!important;
  box-shadow:0 12px 32px -16px rgba(124,92,255,.4);
}
.upload .n-progress .n-progress-graph-line-fill{background:linear-gradient(90deg,#7c5cff,#5b7cff 55%,#22d3ee)!important}

/* ---------- VIP 会员页 ---------- */
.vip .v-card,.vip [class*="plan"]{
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.vip .v-card:hover,.vip [class*="plan"]:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 44px -18px rgba(124,92,255,.45);
  border-color:rgba(124,92,255,.5);
}
.vip .recommend-tag,.vip [class*="recommend"]{
  background:linear-gradient(135deg,#7c5cff,#22d3ee)!important;
  box-shadow:0 4px 12px -3px rgba(124,92,255,.55);
}

/* ---------- 统计卡片（收益统计等） ---------- */
.s-card,.summary .s-card{
  border-radius:16px!important;
  background:linear-gradient(135deg,#6d4df6 0%,#7c5cff 40%,#5b7cff 75%,#3fa9ff 120%)!important;
  box-shadow:0 14px 30px -14px rgba(124,92,255,.55);
  transition:transform .2s ease,box-shadow .2s ease;
}
.s-card:hover,.summary .s-card:hover{transform:translateY(-3px);box-shadow:0 20px 38px -14px rgba(124,92,255,.65)}
.s-card .s-num,.summary .s-num{font-weight:800;letter-spacing:.5px}
.s-card .s-label,.summary .s-label{opacity:.88}

/* ---------- 个人中心 ---------- */
.profile .info-row,.profile [class*="row"]{transition:background .15s ease}
.profile .avatar-wrap img,.profile img.avatar{
  border:3px solid rgba(124,92,255,.3);
  box-shadow:0 8px 22px -8px rgba(124,92,255,.45);
}
.profile .n-descriptions-item-label{color:#96a0bb!important}
.profile .n-descriptions-item-content{color:#1a2138;font-weight:500}

/* ---------- 表格 ---------- */
.n-data-table .n-data-table-th{
  background:#f7f8fd!important;color:#5c6579!important;
  font-size:12.5px;font-weight:600!important;
}
.n-data-table .n-data-table-tr:hover .n-data-table-td{background:rgba(124,92,255,.045)!important}
.n-data-table .n-data-table-td{transition:background .15s ease}

/* ---------- 分页 ---------- */
.n-pagination .n-pagination-item{
  border-radius:9px!important;transition:all .15s ease;
}
.n-pagination .n-pagination-item--active{
  background:linear-gradient(135deg,#7c5cff,#5b7cff)!important;
  box-shadow:0 4px 12px -4px rgba(124,92,255,.55);
}

/* ---------- 弹窗 / 对话框 ---------- */
.n-modal .n-card{border-radius:18px!important;box-shadow:0 28px 68px -22px rgba(13,18,38,.4)!important}

/* ---------- 消息提示 ---------- */
.n-message{border-radius:12px!important;box-shadow:0 12px 34px -12px rgba(13,18,38,.3)!important}

/* ---------- 移动端适配 ---------- */
@media (max-width: 768px){
  .content{padding:14px 12px!important}
  .sidebar .nav-item{padding:10px 12px!important}
  .app-header .user-box .uname{display:none}
}

/* ---------- 动效偏好 ---------- */
@media (prefers-reduced-motion: reduce){
  .content>.n-card,.content .dashboard,.s-card,.sidebar .nav-item{animation:none;transition:none}
}