/*
 * TikTok Shop 增长诊断 —— 页面专属样式。
 * 设计 token、页头、hero、按钮、内容区、FAQ、页脚均来自共享 nod.css
 * （tecpulse-tools 的 Nod 设计系统）。本文件只保留诊断工具与内容区块的专属样式。
 * 注意：nod.css 的 token 命名为 --nod-text / --nod-control-radius / --nod-card-radius /
 * --nod-shell-radius / --nod-popover-shadow，勿再使用旧的 --nod-text-primary 等命名。
 */

/* ---------- 诊断工具区（位于 hero-surface 内） ---------- */
.tool-section{
position:relative;
z-index:1;
scroll-margin-top:96px;
display:grid;
grid-template-columns:290px minmax(0,1fr);
align-items:start;
gap:40px;
padding-bottom:92px}
.tool-intro{
position:sticky;
top:100px}
.tool-intro h2{
margin:0 0 13px;
color:var(--nod-text-strong);
font-size:clamp(28px,2.6vw,36px);
font-weight:700;
letter-spacing:-.035em;
line-height:1.2;
text-wrap:balance}
.tool-intro>p{
color:var(--nod-text-secondary);
font-size:15px;
line-height:1.78;
margin:0}
.tool-outcome{
margin-top:22px;
padding:18px;
background:var(--nod-surface);
border:1px solid var(--nod-border);
border-radius:var(--nod-shell-radius)}
.tool-outcome strong{
display:block;
font-size:15px;
line-height:1.45;
letter-spacing:-.015em;
color:var(--nod-text-strong);
margin-bottom:12px}
.tool-outcome ul{
padding:0;
margin:0;
list-style:none}
.tool-outcome li{
display:flex;
gap:9px;
align-items:center;
padding:5px 0;
font-size:13px;
color:var(--nod-text)}
.tool-outcome svg{
color:var(--nod-success);
flex:0 0 auto}
.tool-shell,.results{
background:var(--nod-surface);
border:1px solid var(--nod-border);
border-radius:var(--nod-large-radius);
padding:22px;
box-shadow:0 16px 44px rgba(31,25,55,.14)}
/* 工具内部的 eyebrow 沿用旧的纯文本 kicker 样式，不用 nod.css 的胶囊外形 */
.tool-shell .eyebrow,.results .eyebrow{
min-height:0;
margin:0;
padding:0;
border:0;
border-radius:0;
background:none;
text-transform:uppercase;
letter-spacing:.075em}
.tool-progress{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:9px}
.tool-progress div{
display:flex;
gap:10px;
align-items:baseline}
.tool-progress strong{
font-size:13px;
color:var(--nod-text-strong)}
.progress-value{
font-size:12px;
color:var(--nod-text-secondary)}
.progress-track{
height:4px;
background:var(--nod-surface-subtle);
border-radius:99px;
overflow:hidden}
.progress-track span{
display:block;
height:100%;
background:var(--nod-brand);
transition:width .2s}
.question-head{
margin:21px 0 16px}
.question-head h2{
font-size:23px;
letter-spacing:-.02em;
color:var(--nod-text-strong);
margin:0 0 3px}
.question-head p{
color:var(--nod-text-secondary);
font-size:13px;
margin:0}
.questions{
display:grid;
gap:20px}
.field{
border:0;
padding:0;
margin:0}
.field legend{
font-size:14px;
font-weight:700;
color:var(--nod-text-strong);
margin-bottom:8px;
line-height:1.45}
.field small{
display:block;
color:var(--nod-text-secondary);
font-size:12px;
margin-top:-4px;
margin-bottom:7px}
.choices{
display:flex;
flex-wrap:wrap;
gap:8px}
.choice{
border:1px solid var(--nod-border-strong);
color:var(--nod-text);
height:34px;
padding:0 10px;
border-radius:var(--nod-control-radius);
display:flex;
gap:7px;
align-items:center;
font-size:13px;
cursor:pointer;
transition:.15s background,.15s border}
.choice input{
position:absolute;
opacity:0;
width:1px;
height:1px}
.choice svg{
display:none;
color:var(--nod-brand)}
.choice:hover{
border-color:var(--nod-brand-border);
background:var(--nod-brand-tint)}
.choice.selected{
border-color:var(--nod-brand);
background:var(--nod-brand-tint);
color:var(--nod-brand-active)}
.choice.selected svg{
display:block}
.tool-actions{
display:flex;
justify-content:space-between;
border-top:1px solid var(--nod-border);
padding-top:19px;
margin-top:23px}
.form-error{
font-size:13px;
color:var(--nod-danger);
display:flex;
align-items:center;
gap:6px;
margin:15px 0 -7px}
.privacy,.limited{
font-size:12px;
color:var(--nod-text-secondary);
display:inline-flex;
align-items:center;
gap:6px}
.privacy{
margin:15px 0 0}
.privacy svg,.limited svg{
color:var(--nod-success)}
.text-button{
border:0;
background:none;
color:var(--nod-text-secondary);
font-size:12px;
font-weight:650;
display:flex;
gap:5px;
align-items:center;
white-space:nowrap;
padding:4px}
.text-button:hover{
color:var(--nod-brand)}

/* ---------- 诊断结果 ---------- */
.result-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:20px}
.result-head h2{
font-size:28px;
letter-spacing:-.03em;
color:var(--nod-text-strong);
margin:8px 0 7px}
.result-head p{
font-size:14px;
max-width:570px;
margin:0;
color:var(--nod-text-secondary)}
.evidence{
display:flex;
gap:8px;
align-items:center;
flex-wrap:wrap;
margin:20px 0 17px;
padding:10px 12px;
background:var(--nod-surface-quiet);
border:1px solid var(--nod-border);
border-radius:7px;
font-size:12px}
.evidence strong{
color:var(--nod-text-strong)}
.evidence span{
display:flex;
align-items:center;
gap:4px;
color:var(--nod-text-secondary)}
.evidence svg{
color:var(--nod-success)}
.verdict{
display:flex;
gap:12px;
padding:16px;
border-radius:var(--nod-card-radius);
border:1px solid;
align-items:flex-start}
.verdict.wait{
background:#fff9f4;
border-color:#ffd9b3}
.verdict.prepare{
background:#f4f8ff;
border-color:#c7dbfb}
.verdict.good{
background:var(--nod-success-soft);
border-color:#b8efc6}
.verdict-icon{
display:grid;
place-items:center;
flex:0 0 34px;
height:34px;
border-radius:50%;
background:#fff;
color:var(--nod-warning)}
.verdict.good .verdict-icon{
color:var(--nod-success)}
.verdict.prepare .verdict-icon{
color:#2563eb}
.verdict h3{
font-size:17px;
line-height:1.35;
color:var(--nod-text-strong);
margin:3px 0 4px}
.verdict p{
font-size:13px;
line-height:1.55;
margin:0;
color:var(--nod-text-secondary)}
.next-steps{
padding:20px 0}
.next-steps h3{
font-size:16px;
color:var(--nod-text-strong);
margin:0 0 10px}
.next-steps ol{
margin:0;
padding:0;
list-style:none;
counter-reset:steps;
display:grid;
gap:8px}
.next-steps li{
counter-increment:steps;
display:flex;
gap:10px;
font-size:13px;
line-height:1.55}
.next-steps li:before{
content:counter(steps);
flex:0 0 21px;
height:21px;
display:grid;
place-items:center;
border-radius:50%;
background:var(--nod-brand-tint);
color:var(--nod-brand);
font-size:11px;
font-weight:750}
.test-note{
background:var(--nod-surface-quiet);
border-inline-start:3px solid var(--nod-brand);
padding:10px 11px;
margin-top:16px;
font-size:13px;
line-height:1.55;
display:grid;
gap:3px}
.test-note strong{
color:var(--nod-text-strong)}
.pulse-continuity{
border:1px solid var(--nod-brand-border);
background:var(--nod-brand-tint);
border-radius:var(--nod-card-radius);
padding:15px;
display:grid;
grid-template-columns:auto 1fr auto;
gap:12px;
align-items:center}
.pulse-icon{
width:34px;
height:34px;
display:grid;
place-items:center;
border-radius:50%;
color:var(--nod-brand);
background:#fff}
.pulse-continuity h3{
font-size:15px;
margin:0 0 2px;
color:var(--nod-text-strong)}
.pulse-continuity p{
font-size:12px;
line-height:1.45;
margin:0;
color:var(--nod-text-secondary)}
.limited{
margin:14px 0 0}

/* ---------- 增长漏斗 ---------- */
.funnel-section{
display:grid;
grid-template-columns:.85fr 1.15fr;
gap:50px;
align-items:center}
.funnel-section h2{
margin:0 0 13px;
color:var(--nod-text-strong);
font-size:clamp(28px,2.6vw,36px);
font-weight:700;
letter-spacing:-.035em;
line-height:1.2;
text-wrap:balance}
.funnel-section p{
margin:0;
color:var(--nod-text-secondary);
font-size:15px;
line-height:1.78}
.funnel{
display:grid;
gap:7px}
.funnel div{
height:48px;
padding:0 13px;
border-radius:var(--nod-control-radius);
color:#fff;
display:flex;
align-items:center;
justify-content:space-between;
background:#8e43fa;
font-size:13px}
.funnel div:nth-child(2){
margin-inline:15px;
background:#9654ef}
.funnel div:nth-child(3){
margin-inline:30px;
background:#9e63e6}
.funnel div:nth-child(4){
margin-inline:45px;
background:#a671de}
.funnel div:nth-child(5){
margin-inline:60px;
background:#ae80d6}
.funnel span{
opacity:.82;
font-size:12px}

/* ---------- GMV Max 对照 ---------- */
.comparison{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px}
.comparison article{
border-radius:var(--nod-card-radius);
background:var(--nod-surface);
border:1px solid var(--nod-border);
padding:18px}
.comparison article:nth-child(2){
border-color:#f2d6bd}
.comparison h3{
font-size:17px;
color:var(--nod-text-strong);
margin:0 0 11px}
.comparison ul{
margin:0;
padding:0;
list-style:none;
display:grid;
gap:8px}
.comparison li{
display:flex;
gap:8px;
align-items:start;
font-size:13px;
line-height:1.5}
.comparison li:before{
content:"";
margin-top:8px;
width:5px;
height:5px;
border-radius:50%;
background:var(--nod-brand);
flex:0 0 5px}

/* ---------- 资源链接 ---------- */
.link-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px}
.link-grid a{
background:var(--nod-surface);
color:var(--nod-text);
border:1px solid var(--nod-border);
border-radius:var(--nod-card-radius);
padding:16px;
text-decoration:none;
display:grid;
gap:7px}
.link-grid a:hover{
border-color:var(--nod-brand-border)}
.link-grid strong{
font-size:15px;
color:var(--nod-text-strong)}
.link-grid span{
font-size:12px;
color:var(--nod-text-secondary);
display:flex;
align-items:center;
gap:5px}

/* ---------- 响应式 ---------- */
@media(max-width:1024px){
.tool-section{
gap:34px;
grid-template-columns:250px minmax(0,1fr)}
.tool-intro h2,.funnel-section h2{
font-size:30px}
.funnel-section{
gap:28px}
}
@media(max-width:900px){
.tool-section{
padding-bottom:72px}
}
@media(max-width:760px){
.tool-section{
display:block;
padding-bottom:56px}
.tool-intro{
position:static;
margin-bottom:22px}
.tool-intro h2,.funnel-section h2{
font-size:28px}
.tool-shell,.results{
padding:16px}
.question-head{
margin:18px 0 15px}
.choices{
gap:7px}
.choice{
min-height:38px;
height:auto;
padding:6px 9px}
.tool-actions{
margin-top:20px}
.result-head{
gap:8px}
.result-head h2{
font-size:24px}
.result-head .text-button{
padding-inline-end:0}
.evidence{
align-items:flex-start}
.pulse-continuity{
grid-template-columns:auto 1fr}
.pulse-continuity .primary-button{
grid-column:1/-1;
width:100%;
min-height:42px}
.comparison,.link-grid,.funnel-section{
grid-template-columns:1fr}
.funnel-section{
gap:19px}
.funnel div:nth-child(n){
margin-inline:0}
.funnel div:nth-child(2){
margin-inline:8px}
.funnel div:nth-child(3){
margin-inline:16px}
.funnel div:nth-child(4){
margin-inline:24px}
.funnel div:nth-child(5){
margin-inline:32px}
.privacy{
align-items:flex-start}
}
[dir="rtl"] .funnel{
direction:rtl}
[dir="rtl"] .next-steps li:before{
direction:ltr}