/* ===== 基础样式 ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* ===== 动画定义 ===== */
@keyframes fadeInUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes gradient-shift { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }

.anim-up { animation: fadeInUp .8s ease-out both; }
.d1 { animation-delay:.1s; } .d2 { animation-delay:.2s; } .d3 { animation-delay:.3s; }
.d4 { animation-delay:.4s; } .d5 { animation-delay:.5s; }
.bg-size-200 { background-size: 200% 200%; }
.animate-gradient { animation: gradient-shift 4s ease infinite; }

/* 观察者动画 */
.obs { opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease; }
.obs.vis { opacity: 1; transform: translateY(0); }

/* 玻璃态 */
.glass { background: rgba(255,255,255,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* 卡片悬浮 */
.card-hover { transition: all .4s cubic-bezier(.4,0,.2,1); }
.card-hover:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(0,82,217,.15); }

/* Tab */
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeInUp .5s ease both; }
.tab-btn.active { background: linear-gradient(135deg,#0052D9,#266FFF); color: #fff; box-shadow: 0 4px 15px rgba(0,82,217,.4); }

/* 滚动条 */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }

/* 场地布局推荐面板 */
.layout-tab.active { background: linear-gradient(135deg,#7C3AED,#0052D9); color: #fff; box-shadow: 0 2px 8px rgba(124,58,237,.35); }
#venue-layout-panel { animation: fadeInUp .4s ease both; }
@keyframes diagramFadeIn { from { opacity:0; transform:scale(.95); } to { opacity:1; transform:scale(1); } }
.diagram-animate { animation: diagramFadeIn .4s ease both; }
.venue-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 600; }
.venue-badge.recommended { background: linear-gradient(135deg, #059669, #10b981); color: #fff; }
.venue-badge.capacity { background: #f0fdf4; color: #059669; border: 1px solid #bbf7d0; }

/* 平滑滚动 */
html { scroll-behavior: smooth; }