/* ========= 色板与基础 ========= */
:root {
  --bg: #0b1020; --fg: #e7ecf3; --muted:#97a0b3; --brand:#5b8cff; --card:#131b33; --line:#25314e;
  /* 统一圆角尺度 */
  --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 999px;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; color:var(--fg); background:linear-gradient(180deg, #050814, #0b1020); font-family: system-ui, -apple-system, Segoe UI, Roboto, 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif; scroll-behavior: smooth; }
a { color: var(--fg); text-decoration: none; }
.container { width: min(1120px, 92%); margin: 0 auto; }

/* ========= 顶部导航 ========= */
.header { position: sticky; top:0; backdrop-filter: blur(8px); background: rgba(5,8,20,.6); border-bottom: 1px solid var(--line); z-index:10; }
.nav { display:flex; align-items:center; justify-content:space-between; padding: .8rem 0; gap:1.5rem; }
.brand { display:flex; align-items:center; gap:.6rem; font-weight:700; }
.logo { width:28px; height:28px; }



/* 中间菜单：水平排布并居中 */
.menu { display:flex; align-items:center; gap:1rem; flex:1 1 auto; justify-content:center; }
.menu a { opacity:.9; }
.menu .btn { padding:.45rem .8rem; border-radius:var(--radius-full); background:var(--brand); color:#fff; font-weight:600; }

/* 右上区域：左=语言，右=用户（注册/登录 或 头像）——关键：space-between */
.nav-side {
  display:flex;
  align-items:center;
  justify-content:space-between; /* 让语言在左、用户在右 */
  gap:.8rem;
  /* min-width:260px;              视设计可调整：确保两端留有空间 */
}

/* 语言切换按钮样式 */
.lang { display:flex; align-items:center; gap:.4rem; }
.lang-btn { border:1px solid var(--line); background:transparent; color:var(--fg); padding:.35rem .5rem; border-radius:var(--radius-sm); cursor:pointer; opacity:.75; }
.lang-btn.active { outline:2px solid var(--brand); opacity:1; }

/* 用户盒（未登录：显示注册/登录；已登录：显示头像 Chip） */
.user-box { display:flex; align-items:center; gap:.4rem; font-size:.95rem; position:relative; }
.user-box a { padding:.35rem .75rem; border-radius:var(--radius-full); border:1px solid var(--line); background:rgba(13,21,48,.75); color:var(--fg); font-weight:600; transition: background .2s ease, color .2s ease; }
.user-box a:hover { background:rgba(91,140,255,.2); color:#fff; }

/* 登录后隐藏“注册/登录”链接（data-state 会被 JS 切换） */
.user-box[data-state="authenticated"] a { display:none; }

/* 头像 Chip（登录后） */
.user-chip { display:flex; align-items:center; gap:.65rem; padding: 0.5rem 0.6rem; border-radius:var(--radius-full); border:1px solid var(--line); background:linear-gradient(180deg, rgba(13,21,48,.92), rgba(13,21,48,.82)); box-shadow:0 6px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04); cursor:pointer; }
.user-chip:hover { background:linear-gradient(180deg, rgba(13,21,48,.95), rgba(13,21,48,.86)); border-color:#2c3b5e; }
.user-chip .avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg, #5b8cff, #3a5ad9); display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; letter-spacing:.02em; box-shadow:0 0 0 2px var(--line), inset 0 1px 0 rgba(255,255,255,.06); }
.user-chip .user-meta { display:flex; flex-direction:column; line-height:1.1; }
.user-chip .user-name { font-weight:600; }
.user-chip .user-id { color:var(--muted); font-size:.78rem; }

/* 头像下拉菜单（点击头像展开） */
.user-menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:180px;
  background:rgba(13,21,48,.98);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  padding:.4rem;
  display:none;         /* 默认隐藏 */
  z-index:20;
}
.user-box.open .user-menu{ display:block; }  /* .open 由 JS 切换 */

.user-menu a,
.user-menu button{
  width:100%;
  display:block;
  text-align:left;
  padding:.6rem .8rem;
  border-radius:var(--radius-md);
  color:var(--fg);
  background:transparent;
  border:0;
  cursor:pointer;
}
.user-menu a:hover,
.user-menu button:hover{
  background:rgba(91,140,255,.15);
}

/* ========= 其它现有样式（保留原设计） ========= */
.btn { display:inline-block; padding:.7rem 1rem; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--brand); color:#fff; font-weight:700; }
.btn.ghost { background: transparent; color: var(--fg); }
.btn.small { padding:.4rem .7rem; font-weight:600; }

.hero { padding: 6rem 0 3rem; background:
 radial-gradient(800px 400px at 60% 0%, rgba(91,140,255,.2), transparent 60%),
 radial-gradient(500px 300px at 10% 20%, rgba(91,140,255,.15), transparent 60%); }
.hero-wrap { display:grid; grid-template-columns: 1fr; gap:2rem; align-items:center; }
.hero-text h1 { font-size: clamp(2rem, 3.6vw, 3.2rem); margin:.2rem 0 1.4rem; }
.hero-text p { color: var(--muted); line-height:1.6; max-width:none; }
.hero-sub { display:block; text-align:right; font-size: clamp(1.4rem, 2.8vw, 1.6rem); color: var(--muted); font-weight:600; letter-spacing:.01em; margin-top: 0; }
.hero-cta { margin-top:1rem; display:flex; gap:.6rem; }
.hero-art { position:relative; height: 280px; width: 425px; }
.orb { position:absolute; inset:auto 0 0 auto; width:200px; height:200px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #5b8cff, #0b1020); filter: blur(2px); box-shadow: 0 0 60px #5b8cff55; right: 12%; top: 8%; }
.orbit { position:absolute; width:280px; height:280px; border-radius:50%; border:1px dashed #5b8cff66; left: 0; top: 6%; }

.section { padding: 3.5rem 0; border-top:1px solid var(--line); }
.section.alt { background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); }
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:1.5rem; }
.grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:1.2rem; }
.cards { display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; }
.cards#audio-columns { margin-top:1.5rem; }
.card#player-card { margin-bottom:1.5rem; }
.card { background: var(--card); border:1px solid var(--line); border-radius:var(--radius-xl); padding:1rem; overflow:hidden; }
.kpi h3 { margin-top:0; }
.kpi-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:.8rem; }
.kpi-grid div { background:#0d1530; border:1px solid var(--line); border-radius:var(--radius-lg); padding:.8rem; text-align:center; }
.kpi-grid span { display:block; font-size:1.3rem; font-weight:800; }
.meta { display:flex; gap:.8rem; color:var(--muted); font-size:.92rem; margin:.4rem 0 .6rem; }
.contact-email { white-space: nowrap; }

.timeline { list-style:none; padding:0; margin:0; display:grid; gap:1rem; }
/* 表单未登录门槛提示 */
.auth-gate { margin:.8rem 0; padding:.6rem .8rem; background:#fff6d8; color:#6b4f2d; border:1px solid #f2d58a; border-radius:.6rem; font-size:.95rem; }
.auth-gate a { color:var(--brand); font-weight:600; }
.timeline li { display:grid; grid-template-columns: 120px 1fr; gap:1rem; align-items:start; }
.timeline time { font-weight:700; color:#c3d2ff; }

.quotes { display:grid; grid-template-columns: 1fr 1fr; gap:1rem; }
blockquote { margin:0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1rem; }
.checks { list-style: none; padding-left: 0; }
.checks li { position: relative; padding-left: 1.2rem; padding-right: 3rem; margin:.3rem 0; }
.checks li::before { content: "✓"; position:absolute; left:0; top:50%; transform: translateY(-50%); color:#69d09c; transition: opacity .15s ease; }
.checks li:hover::before { opacity: 0; }

/* 条目悬停时显示右侧播放/下载控件 */
.item-ctrl { position:absolute; right:0; top:50%; transform: translateY(-50%); display:flex; gap:.35rem; opacity:0; pointer-events:none; transition: opacity .15s ease; }
.checks li:hover .item-ctrl { opacity:1; pointer-events:auto; }
.icon-btn { padding:.2rem .4rem; border:1px solid var(--line); border-radius:var(--radius-full); background:transparent; color:var(--fg); cursor:pointer; font-size:.85rem; line-height:1; }
.icon-btn:hover { background: rgba(91,140,255,.12); }

/* 分栏标题悬停显示打包下载按钮（右侧） */
.section-header { position:relative; padding-right: 2rem; display:flex; align-items:center; justify-content:flex-start; }
.section-ctrl { position:absolute; right:0; top:50%; transform: translateY(-50%); opacity:0; pointer-events:none; transition: opacity .15s ease; display:flex; }
.section-header:hover .section-ctrl { opacity:1; pointer-events:auto; }

.form label { display:grid; gap:.4rem; margin:.5rem 0; }
.form input, .form select, .form textarea { width:100%; padding:.6rem .7rem; border-radius:var(--radius-md); border:1px solid var(--line); background:#0d1530; color:var(--fg); }

/* 实用类：让子元素继承父容器的圆角，以贴合边缘 */
.rounded-inherit { border-radius: inherit; }
.form .help { color: var(--muted); font-size:.9rem; }

.footer { border-top:1px solid var(--line); padding:1.2rem 0; }
.foot { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.social { display:flex; gap:.8rem; }
.social a { color:#c3d2ff; opacity:.9; }

@media (max-width: 900px) {
  .nav { flex-wrap: wrap; }
  .menu { order:3; width:100%; justify-content:flex-start; flex-wrap:wrap; gap:.75rem; }
  .nav-side { justify-content:flex-end; gap:.4rem; flex-wrap:wrap; }
  .hero-wrap { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3, .cards { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 1fr; }
  .hero-art { display:none; }
}