:root{
  --bg:#ffffff;
  --card:#ffffff;
  --text:#333333;
  --muted:#666666;
  --primary:var(--template-primary, #7c3aed);
  --primary-hover:#6d28d9;
  --primary-light:var(--template-accent, #ede9fe);
  --secondary:var(--template-secondary, #f97316);
  --secondary-hover:#ea580c;
  --danger:#ef4444;
  --success:#10b981;
  --border:#e5e7eb;
  --border-light:#f3f4f6;
  --sidebar:#f9fafb;
  --sidebar-hover:#f3f4f6;
  --purple:var(--template-primary, #7c3aed);
  --orange:var(--template-secondary, #f97316);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
/* 前台布局 - 白色风格 */
header{
  background:#fff;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
header .inner{
  max-width:1400px;
  margin:0 auto;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
header .logo{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--text);
}
header .logo-icon{
  width:40px;
  height:40px;
  background:var(--purple);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:20px;
  font-weight:700;
}
header .logo-text{
  display:flex;
  flex-direction:column;
}
header .logo-title{
  font-size:18px;
  font-weight:700;
  color:var(--text);
  line-height:1.2;
}
header .logo-subtitle{
  font-size:12px;
  color:var(--muted);
  line-height:1.2;
  margin-top:2px;
}
header nav{
  display:flex;
  gap:8px;
  align-items:center;
  flex:1;
  justify-content:center;
}
header nav a{
  padding:8px 16px;
  color:var(--text);
  text-decoration:none;
  transition:all .2s;
  font-weight:500;
  border-radius:6px;
}
header nav a:hover{
  background:var(--border-light);
  color:var(--purple);
}
header nav a.active{
  color:var(--purple);
  background:var(--primary-light);
}
header .header-right{
  display:flex;
  align-items:center;
  gap:12px;
}
header .search-box{
  position:relative;
}
header .search-box input{
  padding:8px 16px 8px 40px;
  border:1px solid var(--border);
  border-radius:20px;
  background:#f9fafb;
  width:200px;
  font-size:14px;
  transition:all .2s;
}
header .search-box input:focus{
  outline:none;
  border-color:var(--purple);
  background:#fff;
  width:250px;
}
header .search-box::before{
  content:'🔍';
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:16px;
  pointer-events:none;
}
.site-badge{display:none}
.container{
  max-width:1400px;
  margin:0 auto;
  padding:0 24px;
}
/* Hero区域 - 紫色渐变横幅 */
.hero-banner{
  background:linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color:#fff;
  padding:80px 0;
  margin-bottom:60px;
  position:relative;
  overflow:hidden;
}
.hero-banner::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
  opacity:0.3;
}
.hero-content{
  max-width:1400px;
  margin:0 auto;
  padding:0 24px;
  position:relative;
  z-index:1;
}
.hero-title{
  font-size:48px;
  font-weight:700;
  margin-bottom:16px;
  line-height:1.2;
}
.hero-subtitle{
  font-size:20px;
  opacity:0.9;
  margin-bottom:40px;
}
.hero-stats{
  display:flex;
  gap:60px;
  margin-top:40px;
}
.hero-stat{
  display:flex;
  flex-direction:column;
}
.hero-stat-value{
  font-size:48px;
  font-weight:700;
  line-height:1;
  margin-bottom:8px;
}
.hero-stat-label{
  font-size:16px;
  opacity:0.9;
}
/* 游戏分类筛选 */
.game-filter{
  display:flex;
  gap:12px;
  margin-bottom:32px;
  flex-wrap:wrap;
}
.filter-btn{
  padding:10px 20px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  color:var(--text);
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:all .2s;
}
.filter-btn:hover{
  border-color:var(--purple);
  color:var(--purple);
}
.filter-btn.active{
  background:var(--purple);
  border-color:var(--purple);
  color:#fff;
}
/* 网格布局 */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:24px;
}
/* 游戏卡片 - 白色圆角 */
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  transition:all .3s;
  display:flex;
  flex-direction:column;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.card:hover{
  border-color:var(--purple);
  box-shadow:0 8px 24px rgba(124,58,237,.15);
  transform:translateY(-4px);
}
.card-icon{
  width:60px;
  height:60px;
  background:var(--purple);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:24px;
  font-weight:700;
  margin:20px 20px 12px;
}
.card .content{
  padding:0 20px 20px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.card .title{
  font-size:20px;
  font-weight:700;
  color:var(--text);
  margin-bottom:8px;
}
.card .subtitle{
  font-size:14px;
  color:var(--muted);
  margin-bottom:16px;
}
.card .price-tag{
  display:inline-block;
  padding:6px 16px;
  background:var(--orange);
  color:#fff;
  border-radius:20px;
  font-size:14px;
  font-weight:600;
  margin-bottom:16px;
}
.card .service-label{
  font-size:13px;
  color:var(--muted);
  margin-bottom:8px;
}
.card .tagbar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.card .tag{
  padding:6px 12px;
  background:#f3f4f6;
  color:var(--text);
  border-radius:16px;
  font-size:12px;
  border:1px solid var(--border);
}
.card .btn{
  width:100%;
  background:var(--purple);
  color:#fff;
  border:none;
  padding:12px;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  transition:all .2s;
  text-decoration:none;
  display:block;
  text-align:center;
}
.card .btn:hover{
  background:var(--primary-hover);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(124,58,237,.3);
}
.card .thumb{
  width:100%;
  height:200px;
  background:#f9fafb;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.card .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
/* 按钮样式 */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px;
  background:linear-gradient(135deg, var(--purple) 0%, #9333ea 100%);
  color:#fff;
  border:none;
  border-radius:12px;
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration:none;
  box-shadow:0 4px 12px rgba(124,58,237,.25);
  position:relative;
  overflow:hidden;
}
.btn::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition:left .5s;
}
.btn:hover::before{
  left:100%;
}
.btn:hover{
  background:linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(124,58,237,.4);
}
.btn.secondary{
  background:#fff;
  color:var(--text);
  border:2px solid var(--border);
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.btn.secondary::before{
  display:none;
}
.btn.secondary:hover{
  background:#f9fafb;
  border-color:var(--purple);
  color:var(--purple);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(124,58,237,.15);
}
.btn.btn-large{
  padding:16px 32px;
  font-size:16px;
}
/* 输入框 */
.input{
  width:100%;
  padding:14px 18px;
  border:2px solid var(--border);
  border-radius:12px;
  background:#fff;
  color:var(--text);
  font-size:15px;
  font-family:inherit;
  transition:all .3s;
}
.input:focus{
  outline:none;
  border-color:var(--purple);
  box-shadow:0 0 0 4px rgba(124,58,237,.1);
  background:#fff;
}
.input:hover:not(:focus){
  border-color:#cbd5e1;
}
/* 标签 */
.badge{
  display:inline-block;
  padding:4px 12px;
  border-radius:12px;
  font-size:12px;
  font-weight:600;
}
.badge.success{
  background:#d1fae5;
  color:#065f46;
}
.badge.danger{
  background:#fee2e2;
  color:#991b1b;
}
.badge.primary{
  background:var(--primary-light);
  color:var(--purple);
}
.badge.stat-purple{
  background:linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);
  color:#fff;
}
.badge.stat-green{
  background:linear-gradient(135deg, #10b981 0%, #059669 100%);
  color:#fff;
}
.badge.stat-orange{
  background:linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color:#fff;
}
.badge.stat-blue{
  background:linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color:#fff;
}
/* 管理端布局 - 左侧垂直侧边栏 */
body.admin-layout{
  display:flex;
  min-height:100vh;
  background:#f9fafb;
}
/* 分站管理员侧边栏 - 白色风格 */
.admin-sidebar{
  width:260px;
  background:#fff;
  border-right:1px solid var(--border);
  position:fixed;
  left:0;
  top:0;
  height:100vh;
  overflow-y:auto;
  z-index:50;
  box-shadow:2px 0 8px rgba(0,0,0,.05);
}
.admin-sidebar-header{
  padding:24px;
  border-bottom:1px solid var(--border);
  background:#fff;
}
.admin-sidebar-header h2{
  font-size:20px;
  font-weight:700;
  color:var(--text);
  margin:0;
}
.admin-sidebar-nav{
  padding:16px 0;
}
.admin-sidebar-nav a{
  display:block;
  padding:12px 24px;
  color:var(--text);
  text-decoration:none;
  transition:all .2s;
  font-weight:500;
}
.admin-sidebar-nav a:hover,
.admin-sidebar-nav a.active{
  background:var(--primary-light);
  color:var(--purple);
}
.admin-main{
  flex:1;
  margin-left:260px;
  padding:32px;
  background:#f9fafb;
}

/* 总站管理员侧边栏 - 紫色风格 */
.super-admin-sidebar{
  width:280px;
  background:linear-gradient(180deg, #7c3aed 0%, #6d28d9 100%);
  position:fixed;
  left:0;
  top:0;
  height:100vh;
  overflow-y:auto;
  z-index:50;
  box-shadow:4px 0 20px rgba(124,58,237,.3);
}
.super-sidebar-header{
  padding:24px;
  border-bottom:1px solid rgba(255,255,255,.1);
  display:flex;
  align-items:center;
  gap:12px;
}
.super-sidebar-icon{
  width:32px;
  height:32px;
  background:rgba(255,255,255,.2);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}
.super-sidebar-header h2{
  font-size:18px;
  font-weight:700;
  color:#fff;
  margin:0;
}
.super-sidebar-nav{
  padding:16px 0;
}
.super-sidebar-nav a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 24px;
  color:rgba(255,255,255,.8);
  text-decoration:none;
  transition:all .2s;
  font-weight:500;
  font-size:15px;
}
.super-sidebar-nav a svg{
  flex-shrink:0;
  stroke:rgba(255,255,255,.8);
}
.super-sidebar-nav a:hover{
  background:rgba(255,255,255,.1);
  color:#fff;
}
.super-sidebar-nav a:hover svg{
  stroke:#fff;
}
.super-sidebar-nav a.active{
  background:rgba(255,255,255,.2);
  color:#fff;
  box-shadow:inset 3px 0 0 #fff;
}
.super-sidebar-nav a.active svg{
  stroke:#fff;
}
.super-admin-main{
  flex:1;
  margin-left:280px;
  padding:40px;
  background:linear-gradient(180deg, #f9fafb 0%, #ffffff 100%);
  min-height:100vh;
}

/* 仪表盘样式 */
.dashboard-container{
  padding:0;
}
.dashboard-title{
  font-size:32px;
  font-weight:700;
  margin:0 0 32px;
  color:#1f2937;
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-bottom:32px;
}
.stat-card{
  padding:32px;
  border-radius:16px;
  color:#fff;
  text-align:center;
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  position:relative;
  overflow:hidden;
  border:none;
}
.stat-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(135deg, rgba(255,255,255,.1) 0%, transparent 100%);
  pointer-events:none;
}
.stat-card:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 16px 40px rgba(0,0,0,.2);
}
.stat-card.stat-purple{
  background:linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);
}
.stat-card.stat-green{
  background:linear-gradient(135deg, #10b981 0%, #059669 100%);
}
.stat-card.stat-orange{
  background:linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}
.stat-card.stat-blue{
  background:linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}
.stat-card.stat-red{
  background:#ef4444;
}
.stat-card.stat-yellow{
  background:#eab308;
}
.stat-number{
  font-size:48px;
  font-weight:700;
  margin-bottom:8px;
  line-height:1;
}
.stat-label{
  font-size:16px;
  opacity:0.95;
  font-weight:500;
}
.charts-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-bottom:32px;
}
.chart-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  overflow:hidden;
  transition:all .3s;
}
.chart-card:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  transform:translateY(-2px);
}
.chart-header{
  background:linear-gradient(135deg, #7c3aed 0%, #f97316 100%);
  padding:20px 24px;
  display:flex;
  align-items:center;
  color:#fff;
  font-weight:600;
  font-size:16px;
}
.chart-card:nth-child(2) .chart-header{
  background:linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);
}
.chart-body{
  padding:24px;
  background:#fff;
  min-height:300px;
  position:relative;
}
/* 前台包装器 */
.admin-wrap{
  padding:0;
}
.admin-wrap .admin-section{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:24px;
  margin-bottom:24px;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
/* 管理端区块 */
.admin-section{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:32px;
  margin-bottom:24px;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  transition:all .3s;
}
.admin-section:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.1);
}
.admin-section h2{
  font-size:24px;
  font-weight:700;
  margin:0 0 20px;
  color:var(--text);
}
.admin-section h3{
  font-size:18px;
  font-weight:600;
  margin:24px 0 12px;
  color:var(--text);
}
.form-grid{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:16px;
  align-items:start;
}
.form-grid.three-col{
  grid-template-columns:120px 1fr 120px;
}
.label{
  padding-top:12px;
  font-weight:500;
  color:var(--text);
}
.actions{
  display:flex;
  gap:12px;
  margin-top:24px;
}
.footer-note{
  font-size:13px;
  color:var(--muted);
  margin-top:8px;
}
/* 表格 */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin-top:16px;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.table th,
.table td{
  padding:16px;
  text-align:left;
  border-bottom:1px solid var(--border-light);
}
.table th{
  background:linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  font-weight:700;
  color:var(--text);
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.table tbody tr{
  transition:all .2s;
}
.table tbody tr:hover{
  background:#f9fafb;
  transform:scale(1.01);
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.table tbody tr:last-child td{
  border-bottom:none;
}
/* 产品详情页 */
.product-detail{
  display:grid;
  grid-template-columns:500px 1fr;
  gap:40px;
  margin:40px 0;
}
.product-image{
  border-radius:16px;
  overflow:hidden;
  background:#f9fafb;
}
.product-image img{
  width:100%;
  height:auto;
  display:block;
}
.product-info h1{
  font-size:32px;
  font-weight:700;
  margin-bottom:16px;
  color:var(--text);
}
.product-price{
  font-size:36px;
  font-weight:700;
  color:var(--orange);
  margin-bottom:24px;
}
.product-meta{
  display:flex;
  gap:24px;
  margin-bottom:24px;
  padding:20px;
  background:#f9fafb;
  border-radius:12px;
}
.product-meta-item{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.product-meta-label{
  font-size:13px;
  color:var(--muted);
}
.product-meta-value{
  font-size:16px;
  font-weight:600;
  color:var(--text);
}
.product-description{
  margin-top:40px;
  padding:24px;
  background:#f9fafb;
  border-radius:12px;
}
.product-description h2{
  font-size:20px;
  font-weight:700;
  margin-bottom:16px;
}
/* 订单表单样式 */
.section-block{
  margin-bottom:32px;
  padding:24px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
}
.section-title{
  font-size:20px;
  font-weight:700;
  margin-bottom:8px;
  color:var(--text);
}
.section-desc{
  font-size:14px;
  color:var(--muted);
  margin-bottom:20px;
}
.field-hint{
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}
.field-error{
  font-size:12px;
  color:var(--danger);
  margin-top:4px;
}
/* 新的白色风格浮动侧边栏 */
.floating-sidebar-new{
  position:fixed;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  z-index:1000;
  display:flex;
  flex-direction:column;
  gap:0;
}
.floating-mascot{
  width:80px;
  height:80px;
  background:#fff;
  border-radius:16px 16px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 12px rgba(0,0,0,.1);
  position:relative;
  overflow:hidden;
}
.floating-mascot::after{
  content:'';
  position:absolute;
  top:-20px;
  left:-20px;
  width:40px;
  height:40px;
  background:linear-gradient(135deg, rgba(124,58,237,.1), rgba(249,115,22,.1));
  border-radius:50%;
}
.floating-menu-panel{
  background:#fff;
  border-radius:0 0 16px 16px;
  box-shadow:0 4px 20px rgba(0,0,0,.15);
  padding:12px 0;
  min-width:140px;
}
.floating-menu-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  cursor:pointer;
  transition:all .2s;
  color:#333;
  font-size:14px;
  position:relative;
}
.floating-menu-item:hover{
  background:#f5f5f5;
  color:#7c3aed;
}
.floating-menu-item:hover svg{
  stroke:#7c3aed;
}
.floating-menu-item svg{
  flex-shrink:0;
  stroke:#666;
  transition:stroke .2s;
}
.floating-menu-item span{
  white-space:nowrap;
  font-weight:500;
}
.floating-menu-divider{
  height:1px;
  background:#e5e5e5;
  margin:8px 16px;
}
.floating-menu-item.floating-top{
  border-top:1px solid #e5e5e5;
  margin-top:4px;
  padding-top:16px;
}
/* 响应式 */
@media (max-width:768px){
  header .inner{
    flex-wrap:wrap;
  }
  header nav{
    order:3;
    width:100%;
    justify-content:flex-start;
    margin-top:12px;
  }
  header .search-box input{
    width:150px;
  }
  header .search-box input:focus{
    width:180px;
  }
  .hero-title{
    font-size:32px;
  }
  .hero-subtitle{
    font-size:18px;
  }
  .hero-stats{
    gap:32px;
  }
  .grid{
    grid-template-columns:1fr;
  }
  .product-detail{
    grid-template-columns:1fr;
  }
  .floating-sidebar-new{
    right:10px;
    transform:translateY(-50%) scale(0.9);
  }
  .admin-sidebar{
    width:200px;
  }
  .admin-main{
    margin-left:200px;
  }
}
@media (max-width:480px){
  .admin-sidebar{
    width:180px;
  }
  .admin-main{
    margin-left:180px;
    padding:16px;
  }
  .floating-sidebar-new{
    display:none;
  }
}