/* ============================================================
   XL.AI 数字中台 — 全局基础样式
   所有页面共享，各页面仅保留 page-specific 样式
   ============================================================ */

/* ---- CSS 变量（统一版，汇总所有页面用到的变量）---- */
:root{--bg:#0A0A0A;--surface:#141414;--surface-hover:#1C1C1E;--border:rgba(255,255,255,0.06);--border-hover:rgba(255,255,255,0.1);--text:#fff;--text-sec:rgba(255,255,255,0.55);--text-ter:rgba(255,255,255,0.3);--text-secondary:rgba(255,255,255,0.55);--text-tertiary:rgba(255,255,255,0.3);--accent:#6C5CE7;--accent-light:#A29BFE;--accent-glow:rgba(108,92,231,0.25);--success:#00B894;--danger:#FF7675;--warning:#FDCB6E;--gold:#FFD700;--silver:#C0C0C0;--bronze:#CD7F32;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--font:'Source Han Sans SC','Noto Sans SC';--ease:cubic-bezier(0.16,1,0.3,1);--spring:cubic-bezier(0.34,1.56,0.64,1)}

/* ---- Reset ---- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100dvh;padding-top:60px}

/* ---- Scrollbar ---- */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.15)}

/* ---- 导航栏 ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:0 48px;height:60px;background:rgba(10,10,10,0.82);backdrop-filter:blur(32px) saturate(1.8);-webkit-backdrop-filter:blur(32px) saturate(1.8);border-bottom:0.5px solid var(--border)}
.logo{position:absolute;left:48px;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.logo-mark{width:28px;height:28px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--accent),var(--accent-light));display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#fff;flex-shrink:0}
.logo-text{font-size:16px;font-weight:700;letter-spacing:-0.02em}
.logo-sub{font-weight:400;font-size:11px;color:var(--text-tertiary);letter-spacing:0.03em;margin-left:2px}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-link{position:relative;padding:8px 18px;border-radius:var(--radius-sm);font-size:13px;color:var(--text-secondary);cursor:pointer;transition:all 0.2s;border:none;background:transparent;font-family:inherit}
.nav-link:hover{color:var(--text);background:rgba(255,255,255,0.03)}
.nav-link.active{color:var(--text)}
.nav-right{position:absolute;right:48px;display:flex;align-items:center;gap:12px}

/* ---- 上传按钮 ---- */
.btn-upload{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0;padding:6px;border-radius:var(--radius-sm);border:none;background:rgba(108,92,231,0.1);color:var(--accent-light);font-family:inherit;cursor:pointer;transition:padding 0.3s cubic-bezier(0.34,1.56,0.64,1),gap 0.3s cubic-bezier(0.34,1.56,0.64,1),background 0.2s,box-shadow 0.2s;overflow:visible}
.btn-upload:hover{gap:5px;padding:6px 14px;background:rgba(108,92,231,0.15);box-shadow:0 4px 20px var(--accent-glow)}
.btn-upload .up-ico{position:relative;width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1);z-index:1}
.btn-upload:hover .up-ico{transform:rotate(-360deg) scale(1.15)}
.btn-upload .up-svg{position:absolute;transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1)}
.btn-upload .up-svg--copy{opacity:0;transform:translateY(-3px) scale(0.5)}
.btn-upload:hover .up-svg{opacity:0;transform:translateY(3px) scale(0.5)}
.btn-upload:hover .up-svg--copy{opacity:1;transform:translateY(-5px) scale(1)}
.btn-upload .up-txt{display:flex;gap:1px;align-items:center;font-size:12px;font-weight:500;width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:width 0.3s cubic-bezier(0.34,1.56,0.64,1),opacity 0.25s}
.btn-upload:hover .up-txt{width:auto;opacity:1}
.btn-upload .up-txt span{transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);opacity:0;transform:translateY(4px);font-weight:500}
.btn-upload:hover .up-txt span{opacity:1;transform:translateY(0);transition-delay:calc(var(--i) * 0.06s)}
.btn-upload:not(:hover) .up-txt span{transition-delay:0s!important}

/* ---- 头像 ---- */
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-light));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;cursor:pointer;flex-shrink:0;overflow:hidden}
.avatar.has-avatar{background:transparent}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* ---- 通用按钮 ---- */
.btn-primary{padding:9px 22px;border-radius:var(--radius-sm);border:none;background:linear-gradient(135deg,var(--accent),var(--accent-light));color:#fff;font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;transition:all 0.25s var(--ease)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(108,92,231,0.3)}
.btn-secondary{padding:8px 16px;border-radius:var(--radius-sm);border:0.5px solid var(--border);background:transparent;color:var(--text-sec);font-size:12px;font-family:inherit;cursor:pointer;transition:all 0.2s}
.btn-secondary:hover{border-color:var(--border-hover);color:var(--text)}
.btn-danger{padding:8px 16px;border-radius:var(--radius-sm);border:0.5px solid rgba(255,118,117,0.2);background:rgba(255,118,117,0.06);color:var(--danger);font-size:12px;font-family:inherit;cursor:pointer;transition:all 0.2s}
.btn-danger:hover{background:rgba(255,118,117,0.1)}

/* ---- 标签徽章 ---- */
.tag-preview{display:inline-flex;padding:2px 8px;border-radius:4px;font-size:11px;background:rgba(108,92,231,0.06);color:rgba(162,155,254,0.6);border:0.5px solid rgba(108,92,231,0.08)}
.tag-preview.scene{background:rgba(0,184,148,0.06);color:rgba(0,184,148,0.6);border-color:rgba(0,184,148,0.08)}
.tag-preview.style{background:rgba(253,203,110,0.06);color:rgba(253,203,110,0.6);border-color:rgba(253,203,110,0.08)}
.tag-preview.media{background:rgba(255,118,117,0.06);color:rgba(255,118,117,0.6);border-color:rgba(255,118,117,0.08)}
.tag-preview.tone{background:rgba(0,184,148,0.06);color:rgba(0,184,148,0.6);border-color:rgba(0,184,148,0.08)}
.tag-preview.license{background:rgba(253,203,110,0.06);color:rgba(253,203,110,0.6);border-color:rgba(253,203,110,0.08)}
.tag-preview.model{background:rgba(108,92,231,0.06);color:rgba(162,155,254,0.6);border-color:rgba(108,92,231,0.08)}
.status-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:12px;font-size:11px;background:rgba(0,184,148,0.08);color:var(--success);border:0.5px solid rgba(0,184,148,0.12)}
.status-badge.off{background:rgba(255,118,117,0.08);color:var(--danger);border-color:rgba(255,118,117,0.12)}

/* ---- 卡片（通用） ---- */
.card{position:relative;border-radius:var(--radius-md);overflow:hidden;background:var(--surface);border:0.5px solid rgba(255,255,255,0.03);cursor:pointer;transition:all 0.4s var(--ease);will-change:transform;animation:fadeUp 0.6s var(--ease) both}
.card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,0.07);box-shadow:0 20px 60px rgba(0,0,0,0.4)}
.card-img{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;font-size:13px;color:rgba(255,255,255,0.1);overflow:hidden;position:relative}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s var(--ease)}
.card:hover .card-img img{transform:scale(1.05)}
.card-body{padding:14px 16px 16px}
.card-title{font-size:14px;font-weight:500;color:var(--text);margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-tags{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}
.card-tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;font-size:10px;line-height:1.5;background:rgba(255,255,255,0.03);border:0.5px solid rgba(255,255,255,0.04);color:var(--text-tertiary)}
.card-time{font-size:10px;color:var(--text-tertiary);opacity:0.35;margin-left:4px}
.site-footer{padding:32px 48px 40px;text-align:center;border-top:0.5px solid rgba(255,255,255,0.03)}
.footer-inner{font-size:11px;color:var(--text-ter);display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}

/* ---- Skeleton ---- */
.skeleton{background:linear-gradient(90deg,var(--surface) 25%,var(--surface-hover) 50%,var(--surface) 75%);background-size:200% 100%;animation:skeleton 1.5s infinite}
@keyframes skeleton{0%{background-position:200% 0}to{background-position:-200% 0}}

/* ---- 动画 ---- */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes zoomIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}

/* ---- 响应式（统一断点） ---- */
@media(max-width:768px){
  html{overflow-x:hidden}
  body{overflow-x:hidden;width:100%;max-width:100vw}
  .nav{padding:0 10px;height:48px;justify-content:flex-start}
  .logo{position:static!important;left:auto!important}
  .nav-links{position:static!important;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:4px;flex:1}
  .nav-link{padding:4px 8px;font-size:11px;white-space:nowrap;flex-shrink:0}
  .nav-right{position:static!important;right:auto!important;gap:6px;flex-shrink:0}
  .avatar{width:28px;height:28px;font-size:11px;flex-shrink:0}
  .btn-upload{padding:5px;gap:0}
  .btn-upload:hover{padding:5px 10px!important;gap:3px!important}
  .btn-upload .up-ico{width:16px;height:16px}
  .btn-upload .up-svg,.btn-upload .up-svg--copy{width:10px!important;height:10px!important}
  .btn-upload .up-txt span{font-size:11px}
  .nav-right a[style],.nav-right button[onclick]{padding:4px 8px!important;font-size:10px!important}
  .logo-text{font-size:14px}
  .logo-sub{display:none}
  .site-footer{padding:24px 16px;font-size:10px}
  .footer-inner{font-size:10px}
}