/**
 * VR 全景漫游系统 — 统一高端商务风覆盖样式 (VRLNK·CITY)
 * 与首页 index.tpl 设计系统一致：深海军蓝 + 蔚蓝 + 青 + 奢华金
 * 加载顺序：须在任何基础样式(vr_home_modern.css / vr_720yun_home.css)之后引入
 * 版本: 2026-09-28
 */

/* ========== 设计令牌 ========== */
:root {
  --bg:#07142E; --bg2:#0A1E45; --bg3:#0E2A5C;
  --panel:rgba(255,255,255,.045); --panel2:rgba(255,255,255,.075);
  --border:rgba(255,255,255,.10); --border2:rgba(255,255,255,.16);
  --azure:#2F6BFF; --azure2:#2E9BFF; --cyan:#27C6E8;
  --gold:#D4AF37; --gold2:#E9C46A;
  --text:#EAF1FB; --muted:#A8B8D8; --sub:#6E82AC;
  --shadow:0 18px 50px rgba(2,8,24,.55);
  --radius:18px; --radius-lg:24px;
  --maxw:1200px;
}

/* ========== 全局底色 ========== */
body {
  background: var(--bg);
  color: var(--text);
  font-family:'Inter','PingFang SC','Microsoft YaHei',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a { color: inherit; text-decoration: none; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* 覆盖 purple/pink 动态背景为 海军蓝/蔚蓝/青/金 光晕 */
.animated-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; animation: corpFloat 22s infinite ease-in-out; }
.blob-1 { width: 520px; height: 520px; background: rgba(47,107,255,.45); top: -12%; left: -10%; }
.blob-2 { width: 600px; height: 600px; background: rgba(39,198,232,.32); bottom: -18%; right: -12%; animation-delay: -6s; }
.blob-3 { width: 430px; height: 430px; background: rgba(212,175,55,.22); top: 42%; left: 58%; animation-delay: -11s; }
@keyframes corpFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  25% { transform: translate(50px,-50px) scale(1.08); }
  50% { transform: translate(-30px,30px) scale(.92); }
  75% { transform: translate(40px,20px) scale(1.04); }
}

/* ========== 顶部导航 (替代 glass-nav) ========== */
.vr-header, .corp-nav {
  position: sticky; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 0; border-bottom: 1px solid transparent;
  background: rgba(7,20,46,.0);
  transition: all .3s ease;
}
.vr-header.scrolled, .corp-nav.scrolled {
  background: rgba(7,20,46,.82);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.header-inner, .nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; gap: 28px;
}
.brand-logo, .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); font-weight: 800; font-size: 19px; letter-spacing: .3px; white-space: nowrap; }
.logo-mark, .mark {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--azure), var(--cyan));
  box-shadow: 0 6px 18px rgba(47,107,255,.5); color: #fff; font-size: 20px; font-weight: 800;
}
.brand-logo .logo-text, .brand .name { color: var(--text); }
.brand .name b, .brand-logo .logo-text b { color: var(--gold2); font-weight: 800; }

.main-nav, .nav-links { display: flex; gap: 4px; margin-left: 8px; flex: 1; }
.nav-link {
  color: var(--muted); text-decoration: none; font-weight: 500;
  padding: 9px 14px; border-radius: 10px; transition: .2s; white-space: nowrap; font-size: 14.5px;
}
.nav-link:hover, .nav-link.active { color: #fff; background: rgba(255,255,255,.07); }
/* 导航项：首页用 .nav-links a 后代选择器（链接本身不带 nav-link 类），此处必须等价复刻，否则栏目条退回浏览器默认蓝下划线 */
.nav-links a {
  padding: 9px 14px; border-radius: 10px; color: var(--muted);
  font-size: 14.5px; font-weight: 500; transition: .2s; white-space: nowrap; text-decoration: none;
}
.nav-links a:hover, .nav-links a.active { color: #fff; background: rgba(255,255,255,.07); }

.header-actions, .nav-cta { display: flex; gap: 10px; align-items: center; }

/* 按钮体系 */
.btn-primary, .btn-gold, .btn-ghost, .btn {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600;
  border-radius: 12px; cursor: pointer; transition: .22s; font-size: 14.5px;
  border: 1px solid transparent; text-decoration: none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--azure), var(--azure2));
  color: #fff; padding: 11px 22px; box-shadow: 0 10px 26px rgba(47,107,255,.42);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(47,107,255,.55); }
.btn-ghost { background: rgba(255,255,255,.06); border-color: var(--border2); color: #fff; padding: 11px 20px; }
.btn-ghost:hover { background: rgba(255,255,255,.12); border-color: var(--gold); }
.btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #241a02; padding: 13px 26px; font-weight: 700; }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(212,175,55,.4); }
.btn-lg { padding: 1rem 2.5rem; font-size: 1.05rem; }

/* 移动端切换 */
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--border2);
  background: rgba(255,255,255,.06); color: #fff; font-size: 20px; cursor: pointer; }
.nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 80%; max-width: 330px; z-index: 1100;
  background: rgba(7,20,46,.98); backdrop-filter: blur(16px); padding: 82px 24px 28px;
  transform: translateX(100%); transition: transform .3s ease; overflow-y: auto; }
.nav-drawer.open { transform: translateX(0); }
.nav-drawer a { display: block; padding: 14px 6px; color: var(--muted); border-bottom: 1px solid var(--border); font-size: 16px; text-decoration: none; }
.nav-drawer a:hover { color: var(--gold2); }
.nav-mask { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1050; }
.nav-mask.show { display: block; }

/* ========== 区块通用(section.tpl 内联样式覆盖) ========== */
.section-page { padding: 120px 0 56px; min-height: 60vh; }
.page-header { margin-bottom: 38px; text-align: center; }
.breadcrumb { font-size: 13px; color: var(--sub); margin-bottom: 14px; }
.breadcrumb a { color: var(--sub); text-decoration: none; }
.breadcrumb a:hover { color: var(--azure2); }
.breadcrumb span { margin: 0 7px; opacity: .55; }
.page-title { font-size: 36px; font-weight: 700; letter-spacing: -.5px; margin: 0 0 10px; color: #fff; }
.page-desc { font-size: 15px; color: var(--muted); margin: 0 auto; max-width: 620px; line-height: 1.65; }
.page-meta { margin-top: 16px; font-size: 13px; color: var(--sub); }
.page-meta strong { color: var(--azure2); font-size: 16px; }

.empty-state { text-align: center; padding: 70px 30px; max-width: 560px; margin: 0 auto; }
.empty-icon { font-size: 0; line-height: 1; margin-bottom: 18px; opacity: .9; color: var(--azure2); }
.empty-state h3 { font-size: 20px; color: #fff; margin: 0 0 10px; font-weight: 600; }
.empty-state p { font-size: 14px; color: var(--sub); line-height: 1.7; margin: 0 0 26px; }
.card-date { font-size: 12px; color: var(--sub); margin-top: 9px; }

/* 筛选 / 分页 / 搜索 */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 30px; }
.filter-btn { padding: 7px 17px; border-radius: 20px; font-size: 13px; border: 1px solid var(--border2);
  background: var(--panel); color: var(--muted); cursor: pointer; text-decoration: none; transition: .2s; }
.filter-btn:hover, .filter-btn.active { background: rgba(47,107,255,.18); border-color: rgba(47,107,255,.5); color: var(--azure2); }

.pager-bar { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.pager-bar a, .pager-bar span { padding: 8px 15px; border-radius: 9px; font-size: 13px; text-decoration: none;
  border: 1px solid var(--border2); color: var(--muted); background: var(--panel); }
.pager-bar a:hover { background: rgba(47,107,255,.16); color: var(--azure2); border-color: rgba(47,107,255,.45); }
.pager-bar .cur { background: rgba(47,107,255,.22); color: var(--azure2); border-color: rgba(47,107,255,.5); font-weight: 600; }

.search-form { max-width: 560px; margin: 22px auto 0; display: flex; gap: 10px; }
.search-form input { flex: 1; padding: 12px 18px; border-radius: 26px; font-size: 14px;
  border: 1px solid var(--border2); background: rgba(255,255,255,.07); color: #fff; outline: none; }
.search-form input::placeholder { color: var(--sub); }
.search-form input:focus { border-color: rgba(47,107,255,.6); background: rgba(255,255,255,.1); }
.search-form button { padding: 12px 28px; border-radius: 26px; font-size: 14px; font-weight: 600; cursor: pointer;
  border: none; background: linear-gradient(135deg, var(--azure), var(--azure2)); color: #fff; transition: .2s; }
.search-form button:hover { filter: brightness(1.1); }

/* ========== 玻璃卡片 / VR 卡片 ========== */
.glass-card {
  background: var(--panel); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  box-shadow: var(--shadow); transition: all .3s cubic-bezier(.4,0,.2,1);
}
.glass-card:hover { background: var(--panel2); transform: translateY(-6px); box-shadow: var(--shadow); }

.vr-card { position: relative; overflow: hidden; cursor: pointer; }
.card-image { position: relative; height: 220px; overflow: hidden; }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.vr-card:hover .card-image img { transform: scale(1.1); }
.card-overlay {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem;
  background: linear-gradient(to top, rgba(4,12,30,.9), transparent);
  display: flex; justify-content: space-between; opacity: 0; transition: opacity .3s;
}
.vr-card:hover .card-overlay { opacity: 1; }
.overlay-stats { display: flex; gap: 1rem; color: #fff; }
.overlay-stats .stat { display: flex; align-items: center; gap: .35rem; font-size: .875rem; }
.overlay-stats .stat svg { width: 16px; height: 16px; }
.card-type-badge, .glass-badge-mini {
  position: absolute; top: 1rem; right: 1rem;
  background: rgba(7,20,46,.72); backdrop-filter: blur(8px);
  border-radius: 6px; padding: .25rem .75rem; font-size: .75rem;
  border: 1px solid var(--border2); color: #fff;
}
.card-content { padding: 1.5rem; }
.card-title { font-size: 1.25rem; font-weight: 600; margin-bottom: .5rem; color: #fff; }
.card-desc { color: var(--muted); font-size: .875rem; margin-bottom: 1rem; }
.card-tags { display: flex; gap: .5rem; flex-wrap: wrap; }
.card-link { position: absolute; inset: 0; z-index: 10; }

/* AI 标签 chip —— 统一为蔚蓝胶囊，去除生硬 AI 前缀 */
.tag-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; line-height: 1.6; color: var(--azure2);
  background: rgba(47,107,255,.14); border: 1px solid rgba(47,107,255,.30);
  backdrop-filter: blur(6px); white-space: nowrap; }
.tag-chip::before { display: none; }

/* ========== 页脚 ========== */
.vr-footer, .footer {
  padding: 58px 0 30px; background: rgba(255,255,255,.015);
  border-top: 1px solid var(--border); margin-top: 60px;
}
.footer-content, .foot-grid { max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; margin-bottom: 30px; }
.footer-brand, .foot-brand .brand { margin-bottom: 14px; }
.brand-desc, .foot-brand p { color: var(--sub); font-size: 14px; margin-top: 8px; max-width: 280px; }
.footer-links { display: contents; }
.link-group h4, .fcol h4 { color: #fff; margin-bottom: .75rem; font-size: 1rem; font-weight: 700; letter-spacing: .5px; }
.link-group a, .fcol a { display: block; color: var(--muted); text-decoration: none; padding: .25rem 0; font-size: .875rem; transition: color .2s; }
.link-group a:hover, .fcol a:hover { color: var(--gold2); }
.footer-contact p { color: var(--muted); font-size: .875rem; margin-bottom: .25rem; }
.footer-bottom, .foot-bottom {
  max-width: var(--maxw); margin: 30px auto 0; padding: 22px 24px 0; border-top: 1px solid var(--border);
  text-align: center; color: var(--sub); font-size: .875rem; display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}

/* ========== VIP 会员页覆盖 (vip.tpl 内联蓝青渐变) ========== */
body.vip-body, body {
  background: linear-gradient(160deg, #07142E 0%, #0A1E45 55%, #06121F 100%) !important;
}
.header h1 { background: linear-gradient(135deg, var(--azure2), var(--cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.header p { color: var(--muted); }
.vip-card {
  background: var(--panel) !important; border: 1px solid var(--border2) !important;
  border-radius: var(--radius) !important;
}
.vip-card:hover { border-color: rgba(47,107,255,.5) !important; transform: translateY(-4px); box-shadow: 0 12px 40px rgba(47,107,255,.22) !important; }
.vip-card.popular { border-color: rgba(212,175,55,.55) !important; background: linear-gradient(135deg, rgba(47,107,255,.15), rgba(212,175,55,.10)) !important; }
.vip-card.popular::before { background: linear-gradient(135deg, var(--gold), var(--gold2)) !important; color: #241a02 !important; }
.vip-card h3 { color: #fff !important; }
.price .amount { background: linear-gradient(135deg, var(--azure2), var(--cyan)) !important; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.price .period { color: var(--muted) !important; }
.features li { color: var(--muted) !important; }
.features li::before { color: var(--cyan) !important; }
.btn-buy {
  background: linear-gradient(135deg, var(--azure), var(--azure2)) !important; color: #fff !important;
  border: none !important; box-shadow: 0 10px 26px rgba(47,107,255,.35);
}
.btn-buy:hover { filter: brightness(1.08); }
.privileges { background: var(--panel) !important; border: 1px solid var(--border2) !important; }
.privileges h2 { color: #fff !important; }
.priv-item { background: rgba(7,20,46,.5) !important; }
.priv-icon { background: linear-gradient(135deg, rgba(47,107,255,.30), rgba(39,198,232,.20)) !important; }
.priv-text { color: var(--muted) !important; }
.modal-content { background: #0A1E45 !important; border: 1px solid var(--border2) !important; }

/* ========== 信息页覆盖 (info.tpl 白卡片 → navy 玻璃) ========== */
.info-wrap { max-width: 960px; margin: 120px auto 40px; padding: 0 16px; }
.info-crumb { font-size: 13px; color: var(--sub); margin-bottom: 14px; }
.info-crumb a { color: var(--sub); text-decoration: none; }
.info-crumb a:hover { color: var(--azure2); }
.info-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 34px 38px; box-shadow: var(--shadow); backdrop-filter: blur(16px);
}
.info-card h1 { font-size: 26px; margin: 0 0 8px; color: #fff; }
.info-desc { color: var(--muted); font-size: 14px; margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.info-body { font-size: 15px; line-height: 1.9; color: var(--text); }
.info-body h3 { font-size: 17px; margin: 26px 0 10px; color: #fff; }
.info-body p { margin: 0 0 12px; }
.info-body ul, .info-body ol { margin: 0 0 14px; padding-left: 22px; }
.info-body li { margin: 5px 0; }
.info-body a { color: var(--azure2); text-decoration: none; }
.info-body a:hover { text-decoration: underline; }
.info-body pre { background: rgba(0,0,0,.3); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; overflow: auto; font-size: 13px; color: var(--text); }
.info-body code { background: rgba(255,255,255,.06); padding: 2px 6px; border-radius: 4px; font-size: 13px; }
.info-sitemap-group h3 { margin: 0 0 8px; color: #fff; }
.info-sitemap-group ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.info-sitemap-group li a { color: var(--azure2); }

/* ========== 响应式 ========== */
@media (max-width: 980px) {
  .footer-content, .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .main-nav, .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .page-title { font-size: 26px; }
  .section-page { padding: 110px 0 40px; }
  .info-wrap { margin-top: 100px; }
}
@media (max-width: 560px) {
  .footer-content, .foot-grid { grid-template-columns: 1fr; }
  .info-card { padding: 20px 18px; }
  .info-card h1 { font-size: 21px; }
}