/* Extracted from src/services/voice.njk style block 1 */
/* ============ voice.njk · page-scoped ============ */

/* §01 四大模块 pipeline 面板 */
.vc-pipeline{
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:11px; position:relative;
}
.vc-pipeline::before{
    content:""; position:absolute;
    top:40px; left:13%; right:13%;
    height:1px; background:var(--scn-line); z-index:0;
}
.vc-stage{
    position:relative; z-index:1;
    background:var(--scn-paper);
    border:1px solid var(--scn-line);
    border-radius:13px;
    padding:18px 13px 15px;
    text-align:center;
    transition:border-color .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.vc-stage:hover{
    transform:translateY(-3px);
    border-color:rgba(116,68,253,.24);
    box-shadow:var(--scn-shadow-sm);
}
.vc-stage-icon{
    width:46px; height:46px; margin:0 auto 11px;
    border-radius:50%;
    background:var(--accent-glow); color:var(--accent);
    display:flex; align-items:center; justify-content:center;
    font-size:18px;
}
.vc-stage-num{
    font-family:var(--font-mono);
    font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    color:var(--accent); margin-bottom:5px;
}
.vc-stage h4{
    margin:0 0 4px;
    font-size:14.5px; font-weight:850; letter-spacing:-.005em;
    color:var(--text-primary);
}
.vc-stage p{ margin:0; font-size:11.5px; line-height:1.5; color:var(--text-muted); }
.vc-pipeline-meta{
    margin-top:18px; padding-top:15px;
    border-top:1px dashed var(--scn-line);
    display:flex; align-items:center; gap:11px;
    font-size:12.5px; color:var(--text-secondary);
}
.vc-pipeline-meta .badge-mono{
    font-family:var(--font-mono);
    font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    background:var(--accent-glow); color:var(--accent);
    padding:4px 10px; border-radius:999px;
}

/* §02 多语种字符墙 */
.vc-langs{ display:grid; grid-template-columns:repeat(6,1fr); gap:13px; }
.vc-lang{
    background:#fff;
    border:1px solid var(--scn-line);
    border-radius:13px;
    padding:19px 12px 15px;
    text-align:center;
    transition:transform .25s var(--ease-out), border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.vc-lang:hover{
    transform:translateY(-3px);
    border-color:rgba(116,68,253,.22);
    box-shadow:var(--scn-shadow-sm);
}
.vc-lang b{
    display:block; margin-bottom:5px;
    font-size:17px; font-weight:850; letter-spacing:-.005em;
    color:var(--text-primary);
}
.vc-lang small{
    display:block;
    font-family:var(--font-mono);
    font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
    color:var(--text-muted);
}

/* §03 端侧 vs 云端 成本对比 */
.vc-cost-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.vc-cost-card{
    border:1px solid var(--scn-line);
    border-radius:18px;
    padding:34px 32px;
    background:#fff;
}
.vc-cost-card.is-yuya{
    background:linear-gradient(158deg,#fff 0%,var(--accent-glow) 130%);
    border-color:rgba(116,68,253,.22);
    box-shadow:var(--scn-shadow);
}
.vc-cost-tag{
    display:inline-block;
    font-family:var(--font-mono);
    font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    padding:5px 11px; border-radius:999px;
    margin-bottom:18px;
    background:var(--scn-paper); color:var(--text-muted);
}
.vc-cost-card.is-yuya .vc-cost-tag{ background:var(--accent-glow); color:var(--accent); }
.vc-cost-card h3{
    margin:0 0 18px;
    font-size:21px; font-weight:850; letter-spacing:-.012em;
    color:var(--text-primary);
}
.vc-cost-num{ display:flex; align-items:baseline; gap:8px; margin-bottom:18px; }
.vc-cost-num strong{
    font-family:var(--font-en);
    font-size:36px; font-weight:800; line-height:1; letter-spacing:-.02em;
    color:var(--text-primary);
}
.vc-cost-card.is-yuya .vc-cost-num strong{ color:var(--accent); }
.vc-cost-num span{ font-size:12.5px; color:var(--text-muted); }
.vc-cost-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.vc-cost-list li{
    display:flex; align-items:flex-start; gap:9px;
    font-size:13.5px; line-height:1.6; color:var(--text-secondary);
}
.vc-cost-list li i{ margin-top:4px; flex:none; font-size:11px; }
.vc-cost-list li i.is-good{ color:var(--accent); }
.vc-cost-list li i.is-bad{ color:#c47b34; }
.vc-cost-list li b{ color:var(--text-primary); font-weight:700; }

/* §04 自定义发音人 */
.vc-persona-card{ text-align:center; }
.vc-persona-avatar{
    width:64px; height:64px; margin:0 auto 16px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:25px; color:#fff;
}
.vc-persona-card.t-female .vc-persona-avatar{ background:linear-gradient(135deg,#e59c60,#f0bd8e); }
.vc-persona-card.t-male   .vc-persona-avatar{ background:linear-gradient(135deg,#5575b8,#8aa7d8); }
.vc-persona-card.t-clone  .vc-persona-avatar{ background:linear-gradient(135deg,var(--accent),var(--accent-light)); }
.vc-persona-mono{
    font-family:var(--font-mono);
    font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    color:var(--accent); margin-bottom:9px;
}
.vc-persona-card h4{ margin:0 0 8px; }
.vc-persona-card p{ margin:0; }

@media (max-width:1024px){
    .vc-pipeline{ grid-template-columns:repeat(2,1fr); }
    .vc-pipeline::before{ display:none; }
    .vc-langs{ grid-template-columns:repeat(3,1fr); }
    .vc-cost-grid{ grid-template-columns:1fr; }
}
@media (max-width:480px){
    .vc-pipeline{ grid-template-columns:1fr; }
    .vc-langs{ grid-template-columns:repeat(2,1fr); }
}