/* 莎莎舞讯 · 统一视觉基座 ss.css —— 官网(Vue) 与 内容中心(guide.php) 唯一真源 */
:root{
  --red:#FF2442; --red-press:#E01F3A; --red-tint:rgba(255,36,66,.08);
  --ink:#141417; --ink-2:#1E1E24;
  --text-1:#141417; --text-2:#4A4A52; --text-3:#8A8A93;
  --text-inv:#FFF; --text-inv-2:#A6A6AF;
  --bg:#F6F6F7; --card:#FFF; --line:#ECECEF;
  --r-s:8px; --r-m:16px; --r-l:24px; --r-full:999px;
  --sh-1:0 1px 2px rgba(20,20,23,.05);
  --sh-2:0 8px 24px rgba(20,20,23,.10);
  --sh-3:0 16px 48px rgba(20,20,23,.16);
  --container:1200px; --content:760px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
  color:var(--text-1);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.6}
img{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none}

.ss-wrap{max-width:var(--container);margin:0 auto;padding:0 24px}

/* ---------- 按钮 ---------- */
.ss-btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 24px;border:0;
  border-radius:var(--r-full);background:var(--red);color:#fff;font-size:15px;font-weight:600;cursor:pointer;
  transition:background .2s,transform .2s,box-shadow .2s;white-space:nowrap}
.ss-btn--ghost{background:transparent;color:var(--text-1);border:1px solid var(--line)}
.ss-btn--sm{height:36px;padding:0 18px;font-size:14px}
.ss-btn--glow{box-shadow:0 8px 32px rgba(255,36,66,.35)}
@media (hover:hover){
  .ss-btn:hover{background:var(--red-press);transform:translateY(-1px)}
  .ss-btn--ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.24);transform:translateY(-1px)}
}
.ss-btn:active{transform:translateY(0) scale(.98)}
.ss-btn:focus-visible,.ss-chip:focus-visible,.ss-card:focus-visible,a:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}
.ss-btn:focus-visible{border-radius:var(--r-full)}
h1,h2,h3{text-wrap:balance}
.ss-on-dark .ss-btn--ghost{color:#fff;border-color:rgba(255,255,255,.24)}

/* ---------- chip ---------- */
.ss-chip{display:inline-flex;align-items:center;height:36px;padding:0 18px;border-radius:var(--r-full);
  background:var(--bg);color:var(--text-2);font-size:14px;transition:background .2s,color .2s;white-space:nowrap}
.ss-chip.is-on{background:var(--red-tint);color:var(--red);font-weight:600}
@media (hover:hover){.ss-chip:hover{color:var(--red)}}

/* ---------- 区块标题 ---------- */
.ss-sec-h{display:flex;align-items:baseline;gap:12px;margin:0 0 32px}
.ss-sec-h::before{content:"";flex:0 0 4px;width:4px;height:20px;border-radius:2px;background:var(--red);transform:translateY(3px)}
.ss-sec-h h2{margin:0;font-size:22px;line-height:32px;font-weight:700}
.ss-sec-h .sub{font-size:14px;color:var(--text-3);font-weight:400}
.ss-sec-h .more{margin-left:auto;font-size:14px;color:var(--text-3);transition:color .2s}
@media (hover:hover){.ss-sec-h .more:hover{color:var(--red)}}

/* ---------- 文章卡（全站唯一） ---------- */
.ss-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ss-card{display:block;background:var(--card);border-radius:var(--r-m);box-shadow:var(--sh-1);overflow:hidden;
  transition:transform .3s,box-shadow .3s;min-width:0}
.ss-card .thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--line)}
.ss-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.ss-card .body{padding:16px 20px 20px}
.ss-card .cat{display:inline-block;padding:3px 10px;border-radius:6px;background:var(--bg);
  color:var(--text-3);font-size:12px;font-weight:600;margin-bottom:8px}
.ss-card h3{margin:0 0 8px;font-size:17px;line-height:26px;font-weight:600;height:52px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;transition:color .2s}
.ss-card .dek{margin:0 0 10px;font-size:14px;line-height:22px;color:var(--text-3);overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ss-card .meta{font-size:13px;color:var(--text-3)}
@media (hover:hover){
  .ss-card:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
  .ss-card:hover .thumb img{transform:scale(1.05)}
  .ss-card:hover h3{color:var(--red)}
}

/* 压字卡（精选区） */
.ss-hero-card{position:relative;display:block;border-radius:var(--r-l);overflow:hidden;background:var(--ink)}
.ss-hero-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ss-hero-card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,20,23,0) 40%,rgba(20,20,23,.72) 100%)}
.ss-hero-card .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:32px;color:#fff}
.ss-hero-card .badge{display:inline-block;padding:4px 10px;border-radius:6px;background:var(--red);
  font-size:12px;font-weight:600;margin-bottom:10px}
.ss-hero-card .cap h3{margin:0 0 8px;font-size:26px;line-height:36px;font-weight:800;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ss-hero-card .cap .meta{font-size:13px;color:rgba(255,255,255,.72)}
.ss-hero-card--sm .cap{padding:20px}
.ss-hero-card--sm .cap h3{font-size:17px;line-height:26px;font-weight:700}
@media (hover:hover){.ss-hero-card:hover img{transform:scale(1.05)}}

/* ---------- 转化大卡 ---------- */
.ss-cta{position:relative;display:flex;align-items:center;gap:40px;background:var(--ink);color:#fff;
  border-radius:var(--r-l);padding:40px;overflow:hidden}
.ss-cta .bgimg{position:absolute;right:0;top:0;bottom:0;width:40%;opacity:.14;object-fit:cover;height:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 60%);mask-image:linear-gradient(90deg,transparent,#000 60%)}
.ss-cta .txt{position:relative;z-index:2;flex:1;min-width:0}
.ss-cta h3{margin:0 0 10px;font-size:20px;line-height:30px;font-weight:700}
.ss-cta p{margin:0 0 20px;font-size:14px;line-height:24px;color:var(--text-inv-2)}
.ss-cta .qr{position:relative;z-index:2;flex:0 0 auto;width:136px;height:136px;background:#fff;
  border-radius:var(--r-m);padding:10px}
.ss-cta .qr img{width:100%;height:100%;object-fit:contain}

/* 淡红提示条 */
.ss-tip{display:block;background:var(--red-tint);border-radius:12px;padding:16px 20px;font-size:14px;
  line-height:22px;color:var(--text-2);transition:background .2s}
.ss-tip b{color:var(--red)}
@media (hover:hover){.ss-tip:hover{background:rgba(255,36,66,.12)}}

/* ---------- Header ---------- */
.ss-hd{position:sticky;top:0;z-index:50;height:64px;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line)}
.ss-hd-in{max-width:var(--container);margin:0 auto;padding:0 24px;height:100%;display:flex;align-items:center;gap:32px}
.ss-logo{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:700}
.ss-logo .lmark{width:28px;height:28px;flex:0 0 auto;display:block;filter:drop-shadow(0 2px 6px rgba(255,36,66,.3))}
.ss-nav{display:flex;gap:28px;font-size:15px;color:var(--text-2)}
.ss-nav a{position:relative;padding:4px 0;transition:color .2s}
.ss-nav a.is-on{color:var(--text-1);font-weight:600}
.ss-nav a.is-on::after{content:"";position:absolute;left:50%;bottom:-2px;width:16px;height:2px;
  margin-left:-8px;border-radius:2px;background:var(--red)}
@media (hover:hover){.ss-nav a:hover{color:var(--red)}}
.ss-hd .ss-btn{margin-left:auto}

/* ---------- Footer ---------- */
.ss-ft{background:var(--ink);color:var(--text-inv-2);padding:64px 0 32px;margin-top:96px}
.ss-ft-in{max-width:var(--container);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:40px}
.ss-ft h4{margin:0 0 16px;font-size:14px;font-weight:600;color:#fff}
.ss-ft a{display:block;font-size:14px;line-height:28px;color:var(--text-inv-2);transition:color .2s;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover){.ss-ft a:hover{color:#fff}}
.ss-ft .brand{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:700;color:#fff;margin-bottom:12px}
.ss-ft .brand .lmark{width:28px;height:28px;flex:0 0 auto;display:block}
.ss-ft .slogan{font-size:14px;line-height:24px;max-width:260px}
.ss-ft .qrs{display:flex;gap:16px}
.ss-ft .qrbox{text-align:center;font-size:12px}
.ss-ft .qrbox img{width:96px;height:96px;background:#fff;border-radius:12px;padding:6px;margin-bottom:8px}
.ss-ft .qrbox .ph{width:96px;height:96px;border-radius:12px;border:1px dashed rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;color:var(--text-inv-2);font-size:12px;margin-bottom:8px;
  text-align:center;padding:8px;line-height:16px}
.ss-ft-b{max-width:var(--container);margin:40px auto 0;padding:24px 24px 0;border-top:1px solid rgba(255,255,255,.08);
  text-align:center;font-size:13px;color:var(--text-inv-2)}
.ss-ft-b a{display:inline;color:var(--text-inv-2)}

/* ---------- 扫码弹层 ---------- */
.ss-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(20,20,23,.6);padding:24px}
.ss-modal.is-open{display:flex}
.ss-modal .box{width:320px;max-width:100%;background:#fff;border-radius:var(--r-l);box-shadow:var(--sh-3);
  padding:32px;text-align:center}
.ss-modal .box img{width:200px;height:200px;margin:0 auto 16px;object-fit:contain}
.ss-modal .box p{margin:0;font-size:14px;line-height:22px;color:var(--text-3)}
.ss-modal .box b{display:block;font-size:17px;font-weight:700;color:var(--text-1);margin-bottom:10px}

@media(max-width:768px){
  .ss-wrap{padding:0 20px}
  .ss-hd{height:56px}.ss-hd-in{padding:0 20px;gap:20px}
  .ss-nav{gap:18px;font-size:14px}
  .ss-grid{grid-template-columns:1fr;gap:14px}
  .ss-sec-h{margin-bottom:20px}.ss-sec-h h2{font-size:20px}
  .ss-ft{padding:48px 0 24px;margin-top:56px}
  .ss-ft-in{grid-template-columns:1fr 1fr;gap:28px;padding:0 20px}
  .ss-cta{flex-direction:column;text-align:center;padding:32px 24px;gap:24px}
  .ss-cta .bgimg{display:none}
  .ss-hero-card .cap{padding:20px}
  .ss-hero-card .cap h3{font-size:20px;line-height:29px}

  /* 移动端卡片变横条 */
  .ss-grid .ss-card{display:flex;gap:12px;padding:10px;border-radius:12px}
  .ss-grid .ss-card .thumb{flex:0 0 128px;width:128px;height:85px;aspect-ratio:auto;border-radius:8px}
  .ss-grid .ss-card .body{padding:0;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
  .ss-grid .ss-card .dek{display:none}
  .ss-grid .ss-card h3{font-size:15px;line-height:22px;height:44px;margin-bottom:6px}
  .ss-grid .ss-card .cat{margin-bottom:6px}
}