:root {
  --bg:#12090c; --surface:#1d1014; --card:#2a161c;
  --text:#fff7f5; --muted:#c4a8ae; --line:#4a2a32;
  --primary:#e7c27a; --primary2:#b8893e; --accent:#e11d48; --on:#1a1008;
}
* {box-sizing:border-box}
body {margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--text); line-height:1.65}
a {color:inherit; text-decoration:none}
img {max-width:100%; display:block}
.wrap {width:min(1120px, calc(100% - 32px)); margin:0 auto}
.nav {position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--bg) 92%, transparent); border-bottom:1px solid var(--line); backdrop-filter:blur(12px)}
.nav-inner {display:flex; align-items:center; gap:22px; min-height:68px}
.brand {display:flex; align-items:center; gap:10px; font-size:18px}
.brand img {width:36px; height:36px; border-radius:8px}
.nav nav {display:flex; gap:18px; color:var(--muted); margin-left:auto}
.btn {display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 16px; border-radius:6px; font-weight:700}
.btn-primary {background:var(--primary); color:var(--on)}
.btn-outline {border:1px solid var(--line); color:var(--text)}
.hero {padding:54px 0 20px}
.hero-grid {display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center}
.badge {display:inline-block; color:var(--primary); border:1px solid var(--line); border-radius:99px; padding:4px 10px; font-size:13px}
h1 {font-size:48px; line-height:1.15; margin:14px 0}
h2 {font-size:32px; margin:6px 0 8px}
.hero p, .sub {color:var(--muted)}
.hero-actions, .pills {display:flex; gap:12px; flex-wrap:wrap}
.pills {list-style:none; padding:0; color:var(--muted); font-size:14px}
.hero-frame {background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 18px 40px rgba(0,0,0,.18)}
.hero-frame img {width:100%; height:320px; object-fit:cover}
.hero-frame figcaption {padding:10px 14px; color:var(--muted); font-size:13px}
.section {padding:54px 0}
.tint {background:var(--surface)}
.kicker {color:var(--accent); letter-spacing:.08em; font-size:13px; margin:0}
.grid4, .grid3, .films, .prices, .quotes {display:grid; gap:16px; margin-top:22px}
.grid4 {grid-template-columns:repeat(4,1fr)}
.grid3, .prices {grid-template-columns:repeat(3,1fr)}
.films {grid-template-columns:repeat(4,1fr)}
.quotes {grid-template-columns:1fr 1fr}
.grid4 article, .grid3 article, .price, .faq, blockquote {background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px}
.film {background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.film img {height:280px; width:100%; object-fit:cover}
.film-body, .film p {padding:0 12px}
.film h3 {font-size:16px; margin:12px}
.meta {display:flex; justify-content:space-between; padding:0 12px 12px; color:var(--primary); font-size:13px}
.price.hot {outline:2px solid var(--primary)}
.price em {color:var(--primary); font-style:normal; font-size:13px}
.yen b {font-size:40px}
.price ul {padding-left:18px; color:var(--muted)}
.faq details {border-top:1px solid var(--line); padding:10px 0}
.faq {padding:8px 18px 18px}
footer {padding:48px 0 28px; text-align:center; border-top:1px solid var(--line)}
.stats, .mesh {display:flex; gap:14px; justify-content:center; flex-wrap:wrap; color:var(--muted); margin:16px 0}
.mesh a {border:1px solid var(--line); border-radius:99px; padding:6px 10px}
small {color:var(--muted)}
@media (max-width:860px) {
  .hero-grid, .grid4, .grid3, .films, .prices, .quotes {grid-template-columns:1fr}
  h1 {font-size:34px}
  .nav nav {display:none}
}


/* === 满星SEO与移动端增强组件样式 (Mobile-First) === */
.ac-time-factor-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 12px 0 18px 0;
  font-size: 12px;
  color: #94a3b8;
}
.ac-time-factor-badge span {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
}
.ac-authority-section {
  margin: 40px auto 20px auto;
  max-width: 1160px;
  padding: 24px 20px;
  background: rgba(15, 21, 35, 0.95);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 16px;
  color: #e2e8f0;
  box-sizing: border-box;
}
.ac-auth-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 14px;
  margin-bottom: 20px;
  gap: 10px;
}
.ac-auth-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
.ac-auth-rating {
  font-size: 13px;
  color: #f59e0b;
  font-weight: 600;
}
.ac-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.ac-spec-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.ac-spec-k { color: #94a3b8; }
.ac-spec-v { color: #f8fafc; font-weight: 500; }
.ac-changelog-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 24px;
}
.ac-changelog-title {
  font-size: 14px;
  font-weight: 700;
  color: #38bdf8;
  margin-bottom: 10px;
}
.ac-changelog-list {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: #cbd5e1;
  line-height: 1.8;
}
.ac-trouble-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px 0;
}
.ac-trouble-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.ac-trouble-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 14px 16px;
}
.ac-trouble-brand {
  font-size: 14px;
  font-weight: 600;
  color: #38bdf8;
  margin-bottom: 6px;
}
.ac-trouble-desc {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.6;
}
.ac-safety-cert-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: #10b981;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ac-matrix-nav {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  font-size: 13px;
}
.ac-matrix-title {
  color: #94a3b8;
  margin-bottom: 10px;
  font-weight: 600;
}
.ac-matrix-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.ac-matrix-item {
  display: inline-block;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 6px 12px;
  color: #cbd5e1;
  text-decoration: none;
  font-size: 12px;
  min-height: 44px;
  line-height: 30px;
  box-sizing: border-box;
}
.ac-matrix-item:hover {
  border-color: #f59e0b;
  color: #f59e0b;
}
@media (max-width: 640px) {
  .ac-specs-grid, .ac-trouble-grid {
    grid-template-columns: 1fr;
  }
  .ac-auth-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .ac-safety-cert-bar {
    flex-direction: column;
    gap: 6px;
  }
}