/* vsoul (vsoulh.cn) - 26-10-15 第3站 独立骨架：App侧栏列表面板英雄区 / 4大卡+2宽卡特色 / 紧凑5格错落横轨 / 2×2步骤卡 / 单列问签 / 单列留言评价 / 左图右文下载 */
:root{
  --ink:#131720;
  --ink-2:#0d1119;
  --paper:#ffffff;
  --pink-t:#fdeaf3;
  --pink-t2:#f9d6e6;
  --blue-t:#e9f3fd;
  --main:#e5448a;
  --main-d:#c72f73;
  --alt:#1e86e0;
  --alt-d:#1668b4;
  --line:#e8dde4;
  --line-2:#d9c9d4;
  --line-b:#cfe2f5;
  --muted:#6f6779;
  --text:#232029;
  --sh-1:14px -10px 0 0 #f8d4e4;
  --sh-2:-12px 14px 0 -4px #cfe4f8;
  --sh-3:0 12px 0 -6px #dbe9f8;
  --sh-4:12px 12px 0 -6px #f6d0e1;
  --sh-5:0 10px 0 0 #1e86e0;
  --sh-6:-14px -10px 0 -6px #dceaf9;
  --sh-7:-12px 12px 0 -6px #f7d5e5;
  --sh-8:0 16px 0 -8px #efd6e4;
  --sh-9:10px 10px 0 0 #1e86e0;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font:16px/1.85 "Microsoft YaHei","PingFang SC","Hiragino Sans GB",Arial,sans-serif;overflow-x:hidden}
img{max-width:100%;height:auto;display:block;border:0;border-radius:0}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
button{font:inherit;border:0;background:none;cursor:pointer;border-radius:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 22px}
[id]{scroll-margin-top:84px}

.btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 26px;font-size:15px;font-weight:700;border:2px solid var(--ink);border-radius:0;transition:transform .16s ease,background .16s ease,color .16s ease}
.btn-lg{height:56px;padding:0 32px;font-size:16px}
.btn-main{background:var(--main);border-color:var(--main);color:#fff}
.btn-main:hover{background:var(--main-d);border-color:var(--main-d);transform:translate(-2px,-2px)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff;transform:translate(-2px,-2px)}
.btn-alt{background:var(--alt);border-color:var(--alt);color:#fff}
.btn-alt:hover{background:var(--alt-d);border-color:var(--alt-d);transform:translate(-2px,-2px)}

/* 顶栏 */
.vbar{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line-2);backdrop-filter:blur(6px)}
.vbar-in{display:flex;align-items:center;gap:20px;height:68px}
.vlogo{display:flex;align-items:center;gap:10px;flex:none}
.vlogo img{width:40px;height:40px;border:1px solid var(--line-2)}
.vlogo-t{display:flex;flex-direction:column;line-height:1.2}
.vlogo-t strong{font-size:18px}
.vlogo-t small{font-size:11px;color:var(--muted);letter-spacing:.06em}
.vmenu{display:flex;align-items:center;gap:4px;margin-left:auto}
.vmenu a{padding:8px 12px;font-size:14.5px;color:#514a5a;border-top:2px solid transparent}
.vmenu a:hover{color:var(--main)}
.vmenu a.on{color:var(--main);font-weight:700;border-top-color:var(--main)}
.vbar-r{display:flex;align-items:center;gap:12px;flex:none}
.vbar-cta{height:42px;padding:0 20px;font-size:14px}
.burger{display:none;width:44px;height:44px;border:2px solid var(--ink);flex-direction:column;justify-content:center;align-items:center;gap:5px}
.burger span{display:block;width:20px;height:2px;background:var(--ink)}

/* 英雄区 */
.vhero{background:var(--pink-t);padding:56px 0 62px;border-bottom:1px solid var(--line-2)}
.vhero-in{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.vhero-l{background:#fff;border:1px solid var(--line-2);border-bottom:6px solid var(--alt);padding:32px 30px 28px;box-shadow:var(--sh-1)}
.kicker{display:flex;align-items:center;gap:9px;font-size:13px;letter-spacing:.12em;color:var(--muted)}
.kicker-n{display:inline-grid;place-items:center;width:28px;height:22px;background:var(--alt);color:#fff;font-size:12px;font-weight:800;letter-spacing:0}
.kicker-light{color:#9fc6ee}
.kicker-light .kicker-n{background:var(--main);color:#fff}
.vhero-l h1{margin:16px 0 12px;font-size:74px;line-height:1;font-weight:900;color:var(--ink);letter-spacing:-.02em}
.vhero-lead{font-size:16.5px;line-height:1.95;color:#4c4658;max-width:560px}
.vhero-acts{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 20px}
.vhero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.vhero-tags li{font-size:13.5px;padding:6px 14px;border:1px solid var(--main);color:var(--main);background:rgba(229,68,138,.06)}
.vhero-note{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);border-top:1px dashed var(--line-2);padding-top:14px;max-width:520px}
.beat{width:9px;height:9px;background:var(--alt);flex:none}

/* App 侧栏列表面板 */
.apppanel{display:grid;grid-template-columns:136px 1fr;background:#fff;border:2px solid var(--ink);box-shadow:var(--sh-2)}
.panel-side{background:var(--ink);color:#fff;padding:14px 12px;display:flex;flex-direction:column}
.panel-title{font-size:12px;letter-spacing:.14em;color:#9aa2b0;padding-bottom:10px;border-bottom:1px solid #2c3340}
.panel-list{flex:1;margin-top:8px}
.panel-list li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#c3c9d3;padding:9px 6px;border-bottom:1px solid #262d39}
.panel-list li.on{background:#1f2634;color:#fff;border-left:3px solid var(--main);padding-left:9px}
.pl-av{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;background:#2c3340;color:#e5448a;font-size:11px;font-weight:700}
.panel-list li.on .pl-av{background:var(--main);color:#fff}
.panel-foot{margin-top:10px;font-size:11.5px;color:#8b93a1;border-top:1px solid #2c3340;padding-top:9px}
.panel-main{padding:12px;background:#fff}
.panel-main img{width:100%;max-width:383px;height:auto;margin:0 auto;border:1px solid var(--line)}
.panel-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;border:1px solid var(--line-2);border-bottom:3px solid var(--alt);padding:9px 12px;font-size:12.5px;color:#9a94a6}
.panel-bar i{font-style:normal;background:var(--alt);color:#fff;font-size:12px;padding:3px 12px}

/* 数据条 */
.vband{background:var(--ink);padding:0}
.vband-in{display:grid;grid-template-columns:repeat(4,1fr);background:var(--ink-2);box-shadow:var(--sh-5)}
.bd{padding:30px 16px;text-align:center;border-right:1px solid #2b323f}
.bd:last-child{border-right:0}
.bd b{display:block;font-size:40px;line-height:1.1;font-weight:900;color:#8fc4f5}
.bd span{font-size:13.5px;color:#a9b2c0;letter-spacing:.08em}

/* 区块与区块头 */
.vblock{padding:74px 0}
.vblock-a{background:var(--paper)}
.vblock-b{background:var(--blue-t)}
.vblock-c{background:var(--paper)}
.vblock-d{background:var(--pink-t);border-top:4px solid var(--main)}
.vblock-e{background:var(--paper);border-top:2px dashed var(--line-2)}
.vhead{margin-bottom:34px;padding-bottom:16px;border-bottom:1px solid var(--line-2)}
.vblock-b .vhead{border-bottom:2px solid var(--alt)}
.vblock-d .vhead{border-bottom:3px solid var(--main)}
.vhead-n{display:inline-grid;place-items:center;width:34px;height:24px;background:var(--main);color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.04em}
.vhead h2{margin:12px 0 0;font-size:29px;line-height:1.3;font-weight:900;color:var(--ink)}
.vhead-p{margin-top:8px;font-size:14.5px;color:var(--muted);line-height:1.8;max-width:700px}

/* 紧凑5格错落横轨 */
.vrail{display:flex;justify-content:center;gap:14px;background:#fff;border:1px solid var(--line-2);padding:26px 18px;box-shadow:var(--sh-3)}
.vcell{position:relative;flex:1 1 0;max-width:200px;margin:0;border:1px solid var(--line-2);background:var(--blue-t);padding:10px 10px 0}
.vcell:nth-child(1){transform:translateY(0)}
.vcell:nth-child(2){transform:translateY(-14px)}
.vcell:nth-child(3){transform:translateY(8px)}
.vcell:nth-child(4){transform:translateY(-8px)}
.vcell:nth-child(5){transform:translateY(14px)}
.vcell-no{position:absolute;right:10px;top:10px;z-index:2;background:var(--main);color:#fff;font-size:11.5px;font-weight:800;padding:2px 8px}
.vcell:nth-child(3n) .vcell-no{background:var(--alt)}
.vcell img{width:100%;height:auto}
.vcell figcaption{padding:10px 0 12px;text-align:center;font-size:13px;font-weight:700;color:var(--ink);border-top:1px solid var(--line-2);margin-top:10px}
.vrail-tip{margin-top:18px;text-align:center;font-size:13px;color:var(--muted)}

/* 4 大卡 + 2 通栏宽卡 */
.vfeat{display:grid;grid-template-columns:1fr 1fr;gap:18px;background:#fff;border:1px solid var(--line-2);padding:20px;box-shadow:var(--sh-4)}
.vf{border:1px solid var(--line);border-top:4px solid var(--main);background:#fff;padding:24px 22px}
.vf:nth-child(2) .vf-no{color:var(--alt)}
.vf:nth-child(2){border-top-color:var(--alt)}
.vf:nth-child(3){border-top-color:var(--ink)}
.vf:nth-child(3) .vf-no{color:var(--ink)}
.vf-no{display:block;font-size:30px;line-height:1;font-weight:900;color:var(--main);letter-spacing:-.02em}
.vf h3{margin:12px 0 8px;font-size:18.5px;font-weight:800;color:var(--ink);padding-bottom:9px;border-bottom:1px solid var(--line)}
.vf p{font-size:14.5px;line-height:1.85;color:#514b5e}
.vf-wide{grid-column:1/-1;display:flex;align-items:center;gap:26px;border-top-color:var(--main);border-left:5px solid var(--main);background:var(--pink-t)}
.vf-wide .vf-no{flex:none;font-size:34px}
.vf-wide h3{margin-top:0}
.vf-meta{flex:none;align-self:center;font-size:12.5px;color:#fff;background:var(--alt);padding:6px 14px;letter-spacing:.06em}

/* 单列留言评价 */
.vnotes{display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid var(--line-2);padding:22px;box-shadow:var(--sh-6)}
.vn{border:1px solid var(--line);border-left:5px solid var(--alt);padding:18px 22px}
.vn:nth-child(2n){border-left-color:var(--main)}
.vn-h{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding-bottom:11px;border-bottom:1px dashed var(--line-2)}
.vn-av{display:inline-grid;place-items:center;width:32px;height:32px;flex:none;background:var(--ink);color:#fff;font-size:14px;font-weight:800}
.vn-h b{font-size:14px;color:var(--ink)}
.vn-h time{margin-left:auto;font-size:12.5px;color:var(--muted);letter-spacing:.04em}
.vn p{font-size:15px;line-height:1.9;color:#48425a}

/* 2×2 步骤卡 */
.vsteps{display:grid;grid-template-columns:1fr 1fr;gap:18px;background:#fff;border:1px solid var(--line-2);padding:20px;box-shadow:var(--sh-7)}
.vstep{border:1px solid var(--line);border-left:5px solid var(--alt);padding:22px}
.vstep:nth-child(2n){border-left-color:var(--main)}
.vs-no{font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--muted)}
.vstep h3{margin:10px 0 8px;font-size:18px;font-weight:800;color:var(--ink)}
.vstep h3::after{content:"";display:block;width:36px;height:2px;background:var(--main);margin-top:8px}
.vstep p{font-size:14.5px;line-height:1.85;color:#514b5e}

/* 单列问签 */
.vask{background:#fff;border:1px solid var(--line-2);padding:18px;box-shadow:var(--sh-8)}
.vq{border:1px solid var(--line);margin-bottom:10px}
.vq:last-child{margin-bottom:0}
.vq[open]{border-color:var(--alt);border-left:5px solid var(--alt)}
.vq summary{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;list-style:none}
.vq summary::-webkit-details-marker{display:none}
.vq-n{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border:1px solid var(--main);color:var(--main);font-size:13px;font-weight:800}
.vq[open] .vq-n{background:var(--main);color:#fff}
.vq-t{flex:1;font-size:16px;font-weight:700;color:var(--ink)}
.vq-ic{flex:none;width:11px;height:11px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s ease}
.vq[open] .vq-ic{transform:rotate(225deg)}
.vq-a{padding:0 18px 18px 58px}
.vq-a p{font-size:14.5px;line-height:1.9;color:#4b4559;padding-top:12px;border-top:1px solid var(--line)}

/* 左图右文下载 */
.vcta{background:var(--ink-2);padding:0}
.vcta-box{display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center;background:var(--ink);border-top:5px solid var(--main);padding:44px 34px;box-shadow:var(--sh-9)}
.vcta-pic{flex:none}
.vcta-pic img{width:200px;max-width:200px;height:auto;border:2px solid #2c3340}
.vcta-txt h2{margin:12px 0 10px;font-size:30px;font-weight:900;color:#fff}
.vcta-p{font-size:14.5px;line-height:1.9;color:#aab3c0;max-width:560px}
.vcta-act{display:flex;align-items:center;gap:16px;margin-top:22px;flex-wrap:wrap}
.vcta-note{font-size:12.5px;color:#8d97a6;letter-spacing:.06em}

/* 页脚 */
.vfoot{background:var(--blue-t);padding:54px 0 28px;border-top:1px solid var(--line-b)}
.vfoot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
.vfoot-logo{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.vfoot-logo img{width:36px;height:36px;border:1px solid var(--line-b)}
.vfoot-logo b{font-size:17px}
.vfoot-logo p{font-size:12px;color:var(--muted)}
.vfoot-note{font-size:13.5px;line-height:1.85;color:#57626f;max-width:400px}
.vfoot-col h4{font-size:14px;color:var(--ink);margin-bottom:14px;padding-bottom:8px;border-bottom:2px solid var(--main)}
.vfoot-col li{margin-bottom:9px}
.vfoot-col a{font-size:13.5px;color:#514b5e}
.vfoot-col a:hover{color:var(--main)}
.vfoot-copy{margin-top:32px;padding-top:20px;border-top:1px solid var(--line-b);text-align:center}
.vfoot-copy p{font-size:12.5px;color:var(--muted);line-height:1.9}

/* 悬浮按钮 */
.backtop{position:fixed;right:24px;bottom:160px;z-index:99989;width:46px;height:46px;display:grid;place-items:center;background:var(--alt);color:#fff;font-size:19px;border:2px solid var(--alt);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease}
.backtop.show{opacity:1;visibility:visible;transform:translateY(0)}
.backtop:hover{background:var(--main);border-color:var(--main)}

.rv{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}

@media (max-width:980px){
  .vhero-in{grid-template-columns:1fr;gap:36px}
  .vhero-l{padding:26px 22px 22px;box-shadow:10px -8px 0 0 #f8d4e4}
  .vhero-l h1{font-size:54px}
  .vrail{justify-content:flex-start}
  .vfoot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:15.5px}
  .wrap{padding:0 16px}
  [id]{scroll-margin-top:72px}
  .vmenu{position:absolute;left:0;right:0;top:68px;flex-direction:column;align-items:stretch;background:#fff;border-bottom:2px solid var(--main);display:none;padding:6px 0}
  .vmenu.open{display:flex}
  .vmenu a{padding:14px 20px;font-size:16px;border-bottom:1px solid var(--line);border-top:0}
  .vmenu a.on{background:var(--pink-t)}
  .burger{display:flex}
  .vbar-cta{display:none}
  .vhero{padding:34px 0 42px}
  .vhero-l h1{font-size:44px}
  .vhero-lead{font-size:15.5px;line-height:1.9}
  .vhero-acts{gap:10px}
  .btn-lg{height:50px;padding:0 22px;font-size:15px}
  .apppanel{grid-template-columns:1fr;box-shadow:-10px 12px 0 -4px #cfe4f8}
  .panel-side{display:none}
  .panel-main{padding:10px}
  .panel-main img{margin:0 auto}
  .vband-in{grid-template-columns:repeat(2,1fr)}
  .bd{border-right:0;border-bottom:1px solid #2b323f;padding:22px 12px}
  .bd b{font-size:32px}
  .vblock{padding:50px 0}
  .vhead h2{font-size:22px}
  .vrail{overflow-x:auto;scroll-snap-type:x mandatory;justify-content:flex-start;padding:16px 14px;box-shadow:0 10px 0 -6px #dbe9f8;-webkit-overflow-scrolling:touch}
  .vcell{flex:0 0 62%;max-width:none;transform:none !important;scroll-snap-align:center}
  .vfeat{grid-template-columns:1fr;padding:14px;box-shadow:10px 10px 0 -6px #f6d0e1}
  .vf-wide{flex-direction:column;align-items:flex-start;gap:12px}
  .vnotes{padding:14px;box-shadow:-12px -8px 0 -6px #dceaf9}
  .vn{padding:16px}
  .vn-h{flex-wrap:wrap}
  .vn-h time{margin-left:0;width:100%}
  .vsteps{grid-template-columns:1fr;padding:14px;box-shadow:-10px 10px 0 -6px #f7d5e5}
  .vask{padding:12px;box-shadow:0 14px 0 -8px #efd6e4}
  .vq summary{padding:14px;gap:12px}
  .vq-t{font-size:15px}
  .vq-a{padding:0 14px 16px 52px}
  .vcta-box{grid-template-columns:1fr;gap:24px;padding:32px 20px;box-shadow:8px 8px 0 0 #1e86e0}
  .vcta-pic img{width:180px;max-width:180px;margin:0 auto}
  .vcta-txt h2{font-size:24px}
  .vfoot-grid{grid-template-columns:1fr;gap:24px}
  .vfoot-note{max-width:none}
  .backtop{right:16px;bottom:150px;width:42px;height:42px;font-size:17px}
}
@media (max-width:400px){
  .vhero-l h1{font-size:38px}
  .vcell{flex:0 0 72%}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .btn{transition:none}
  .vq-ic{transition:none}
}