/* ═══════════════════════════════════════
   base.css — 全局基础样式
   所有页面都引入此文件
═══════════════════════════════════════ */

@import url('https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css');

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#050510;font-family:'Noto Sans SC',sans-serif;color:#e2e8f0;overflow-x:hidden}

/* 背景层 */
.bg-canvas{
  position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%,rgba(99,40,255,.3) 0%,transparent 70%),
    radial-gradient(ellipse 40% 50% at 95% 90%,rgba(0,200,180,.15) 0%,transparent 60%),
    #050510;
}
.bg-grid{
  position:fixed;inset:0;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:60px 60px;
}

/* 侧边栏 */
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:240px;z-index:100;
  background:rgba(10,10,25,.8);backdrop-filter:blur(20px);
  border-right:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;
  padding:0 0 20px;
}
.sidebar-logo{padding:28px 24px 20px;border-bottom:1px solid rgba(255,255,255,.06)}
.logo-text{
  font-family:'Syne',sans-serif;font-weight:800;font-size:22px;
  background:linear-gradient(135deg,#a78bfa,#38bdf8);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.logo-badge{font-size:11px;color:#475569;margin-top:2px;letter-spacing:1px}

.nav-section{padding:16px 12px 4px;font-size:10px;color:#334155;letter-spacing:2px;text-transform:uppercase;font-weight:600}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;margin:2px 8px;border-radius:10px;
  font-size:13.5px;color:#94a3b8;cursor:pointer;
  transition:all .15s;text-decoration:none;
  border:none;background:none;width:calc(100% - 16px);text-align:left;
}
.nav-item:hover{background:rgba(255,255,255,.05);color:#e2e8f0}
.nav-item.active{background:rgba(167,139,250,.12);color:#a78bfa;border:1px solid rgba(167,139,250,.15)}
.nav-item .icon{font-size:16px;width:22px;text-align:center;flex-shrink:0}

.sidebar-footer{margin-top:auto;padding:16px 12px 0;border-top:1px solid rgba(255,255,255,.06)}
.user-card{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
}
.user-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,#6328ff,#a855f7);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;overflow:hidden;
}
.user-avatar img{width:100%;height:100%;object-fit:cover}
.user-name{font-size:13px;font-weight:500;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-pts{font-size:11px;color:#a78bfa;margin-top:1px}
.btn-logout{
  display:block;margin-top:8px;padding:8px;text-align:center;
  font-size:12px;color:#475569;border-radius:8px;text-decoration:none;
  border:1px solid rgba(255,255,255,.05);transition:all .15s;
}
.btn-logout:hover{color:#e2e8f0;border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.04)}

/* 主内容区 */
.main{margin-left:240px;min-height:100vh;position:relative;z-index:1;padding:32px 40px}
.page-title{
  font-family:'Syne',sans-serif;font-size:22px;font-weight:800;
  background:linear-gradient(135deg,#e2e8f0 30%,#a78bfa);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:6px;
}
.page-sub{font-size:13px;color:#64748b;margin-bottom:20px}

/* 动画 */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:.8}}
@keyframes slideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* 默认隐藏移动端导航组件 */
.mobile-nav-toggle{display:none}
.mobile-overlay{display:none}

/* 响应式 */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%) !important;transition:transform .25s ease !important;z-index:1200 !important}
  body.sidebar-open .sidebar{transform:translateX(0) !important}

  .mobile-overlay{
    display:block;
    position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);
    z-index:1100;opacity:0;pointer-events:none;transition:opacity .2s ease;
  }
  body.sidebar-open .mobile-overlay{opacity:1;pointer-events:auto}

  .mobile-nav-toggle{
    position:fixed;left:14px;top:14px;z-index:1300;
    width:40px;height:40px;border-radius:10px;
    border:1px solid rgba(167,139,250,.35);
    background:rgba(10,10,25,.85);color:#c4b5fd;
    display:flex;align-items:center;justify-content:center;
    font-size:20px;cursor:pointer;
    backdrop-filter:blur(8px);
  }

  .main{margin-left:0 !important;padding:66px 14px 16px !important}
  .page-title{font-size:20px}
  .panel{padding:16px !important;border-radius:12px}
}

@media(max-width:420px){
  .mobile-nav-toggle{left:10px;top:10px}
  .main{padding:60px 10px 14px !important}
}