/* X2 POS — Диагностика магазина. Стили скоупим под #diagnostika-page,
   опираемся на токены main.css (--primary, --text, --muted, --card, --radius, --shadow). */

#diagnostika-page .diag{max-width:560px; margin:0 auto}
#diagnostika-page .diag__card{
    background:var(--card);
    border:1px solid rgba(15,23,42,.06);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:30px 26px;
}
#diagnostika-page .diag__footnote{
    text-align:center;
    font-size:12px;
    color:var(--muted);
    margin-top:18px;
    line-height:1.5;
    opacity:.8;
}

#diagnostika-page .step{animation:diagRise .4s cubic-bezier(.2,.7,.3,1)}
@keyframes diagRise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* ----- progress bar ----- */
#diagnostika-page .progress{display:flex; gap:4px; margin-bottom:24px; background:transparent; box-shadow:none; height:auto; overflow:visible}
#diagnostika-page .progress i{height:5px; flex:1; border-radius:99px; background:#e5e9f1; transition:background .35s ease}
#diagnostika-page .progress i.done{background:var(--primary)}
#diagnostika-page .progress i.active{background:linear-gradient(90deg, var(--primary) 60%, #e5e9f1 60%)}

/* ----- intro ----- */
#diagnostika-page .intro .eyebrow{
    display:inline-block;
    font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:var(--primary); background:rgba(43,120,227,.10);
    padding:6px 12px; border-radius:99px; margin-bottom:16px;
}
#diagnostika-page .intro h1{
    font-family:var(--heading-font);
    font-size:28px; font-weight:800; line-height:1.18;
    color:var(--text); margin:0 0 12px;
}
#diagnostika-page .intro .intro__lead{color:var(--muted); font-size:16px; margin:0 0 22px; line-height:1.5}
#diagnostika-page .intro .intro__meta{display:flex; gap:18px; margin:0 0 24px; flex-wrap:wrap}
#diagnostika-page .intro .intro__meta div{font-size:12.5px; color:var(--muted)}
#diagnostika-page .intro .intro__meta b{display:block; font-family:var(--heading-font); font-weight:800; font-size:18px; color:var(--text); margin-bottom:2px}

/* ----- primary action button (matches landing .btn-primary) ----- */
#diagnostika-page .diag__btn{
    display:flex; justify-content:center; align-items:center; gap:10px;
    width:100%; padding:16px 22px;
    background:linear-gradient(135deg, var(--primary), var(--primary-700));
    color:#fff; border:none; border-radius:14px;
    font-family:var(--heading-font); font-weight:700; font-size:16px;
    cursor:pointer; text-decoration:none;
    box-shadow:0 8px 24px -10px rgba(43,120,227,.55);
    transition:filter .2s ease, transform .12s ease;
}
#diagnostika-page .diag__btn:hover{filter:saturate(1.1) brightness(1.05); color:#fff}
#diagnostika-page .diag__btn:active{transform:translateY(1px)}
#diagnostika-page .diag__btn[disabled]{opacity:.55; cursor:not-allowed}

#diagnostika-page .reassure{font-size:13px; color:var(--muted); text-align:center; margin-top:14px}

/* ----- question screen ----- */
#diagnostika-page .qnum{font-size:13px; color:var(--muted); margin-bottom:10px; font-weight:500}
#diagnostika-page .qtext{
    font-family:var(--heading-font); font-weight:700;
    font-size:20px; line-height:1.25; color:var(--text); margin-bottom:20px;
}
#diagnostika-page .opt{
    display:flex; align-items:center; gap:13px; width:100%; text-align:left;
    cursor:pointer; background:#fff;
    border:1.5px solid #e5e9f1; border-radius:12px;
    padding:14px 16px; margin-bottom:10px;
    font-size:15px; color:var(--text);
    font-family:var(--default-font);
    transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
#diagnostika-page .opt:hover{border-color:#c9d1e2; background:#fafbff}
#diagnostika-page .opt:active{transform:scale(.99)}
#diagnostika-page .opt .dot{width:20px; height:20px; border-radius:99px; border:2px solid #d8dde9; flex:none; transition:.15s ease}
#diagnostika-page .opt.sel{border-color:var(--primary); background:rgba(43,120,227,.06)}
#diagnostika-page .opt.sel .dot{border-color:var(--primary); background:var(--primary); box-shadow:inset 0 0 0 3px #fff}

#diagnostika-page .back{
    background:none; border:none; color:var(--muted);
    font-family:inherit; font-size:14px; cursor:pointer;
    margin-top:6px; padding:8px 2px;
}
#diagnostika-page .back:hover{color:var(--text)}

/* ----- result: ring ----- */
#diagnostika-page .res-head{text-align:center; margin-bottom:8px}
#diagnostika-page .ring-wrap{position:relative; width:158px; height:158px; margin:4px auto 12px}
#diagnostika-page .ring-wrap svg{transform:rotate(-90deg)}
#diagnostika-page .ring-val{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
#diagnostika-page .ring-val .n{font-family:var(--heading-font); font-weight:800; font-size:44px; line-height:1}
#diagnostika-page .ring-val .s{font-size:12px; color:var(--muted); margin-top:2px}

#diagnostika-page .band{
    display:inline-block;
    font-family:var(--heading-font); font-weight:700; font-size:14px;
    padding:6px 14px; border-radius:99px; margin-bottom:4px;
}
#diagnostika-page .lead-line{text-align:center; font-size:15px; color:var(--muted); margin:6px 4px 0; line-height:1.45}

/* ----- result: metric box ----- */
#diagnostika-page .metricbox{
    border-radius:16px; padding:20px; text-align:center;
    margin:20px 0; border:1px solid;
}
#diagnostika-page .metricbox .lbl{font-size:13px; font-weight:600; margin-bottom:6px}
#diagnostika-page .metricbox .big{
    font-family:var(--heading-font); font-weight:800; font-size:36px;
    line-height:1; letter-spacing:-.01em; font-variant-numeric:tabular-nums;
}
#diagnostika-page .metricbox .big small{font-size:18px; font-weight:600}
#diagnostika-page .metricbox .sub{font-size:13.5px; color:var(--muted); margin-top:8px}
#diagnostika-page .metricbox .sub b{color:var(--text); font-family:var(--heading-font); font-weight:700}

#diagnostika-page .block-title{
    font-family:var(--heading-font); font-weight:700;
    font-size:12.5px; text-transform:uppercase; letter-spacing:.04em;
    color:var(--muted); margin:20px 0 8px;
}

/* ----- strengths / findings / gains ----- */
#diagnostika-page .strengths{list-style:none; padding:0; margin:0}
#diagnostika-page .strengths li{font-size:14.5px; padding:9px 0; border-top:1px solid #eef0f5; color:var(--text)}
#diagnostika-page .strengths li:first-child{border-top:none}

#diagnostika-page .find{display:flex; gap:12px; padding:14px 0; border-top:1px solid #eef0f5}
#diagnostika-page .find:first-of-type{border-top:none}
#diagnostika-page .find .ic{font-size:19px; flex:none; line-height:1.3}
#diagnostika-page .find h4{font-family:var(--heading-font); font-weight:700; font-size:15px; margin:0 0 2px; color:var(--text)}
#diagnostika-page .find p{font-size:13.5px; color:var(--muted); line-height:1.45; margin:0}

#diagnostika-page .gains{
    list-style:none; padding:14px 16px; margin:0;
    background:rgba(43,120,227,.06); border:1px solid rgba(43,120,227,.18);
    border-radius:14px;
}
#diagnostika-page .gains li{display:flex; gap:10px; font-size:14.5px; padding:6px 0; color:var(--text)}
#diagnostika-page .gains li::before{content:'✓'; color:var(--primary); font-family:var(--heading-font); font-weight:800}

#diagnostika-page .calm{
    font-size:13.5px; color:var(--muted);
    background:#f1f4fa; border-radius:12px;
    padding:13px 15px; margin:16px 0 6px; line-height:1.5;
}

/* ----- result: CTA box (lead capture) ----- */
#diagnostika-page .cta-box{
    margin-top:22px;
    background:linear-gradient(135deg, rgba(43,120,227,.06), rgba(34,197,94,.05));
    border:1px solid rgba(43,120,227,.18);
    border-radius:18px; padding:22px 20px;
}
#diagnostika-page .cta-box h3{font-family:var(--heading-font); font-weight:800; font-size:19px; line-height:1.25; margin:0 0 6px; color:var(--text)}
#diagnostika-page .cta-box p{font-size:14px; color:var(--muted); margin:0 0 16px; line-height:1.45}

#diagnostika-page .field{margin-bottom:10px; position:relative}
#diagnostika-page .field input{
    width:100%;
    padding:14px 15px;
    border-radius:12px;
    border:1.5px solid #d8dde9; background:#fff; color:var(--text);
    font-family:inherit; font-size:15px;
    transition:border-color .15s ease;
}
#diagnostika-page .field input::placeholder{color:#9aa3b6}
#diagnostika-page .field input:focus{outline:none; border-color:var(--primary)}
#diagnostika-page .field input.error{border-color:#e53935}

/* honeypot — спрятан */
#diagnostika-page .hp-field{position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; opacity:0; pointer-events:none}

#diagnostika-page .consent{
    display:flex; align-items:flex-start; gap:9px;
    font-size:12.5px; color:var(--muted);
    margin:6px 2px 14px; cursor:pointer; line-height:1.45;
}
#diagnostika-page .consent input[type=checkbox]{flex:none; margin-top:3px; accent-color:var(--primary); transform:scale(1.1)}
#diagnostika-page .consent a{color:var(--primary); text-decoration:underline}
#diagnostika-page .consent a:hover{color:var(--primary-700)}
#diagnostika-page .consent.error{color:#e53935}

#diagnostika-page .note{font-size:12px; color:var(--muted); margin-top:12px; text-align:center}

#diagnostika-page .skip{
    display:block; width:100%; text-align:center;
    background:none; border:none; color:var(--muted);
    font-family:inherit; font-size:14px; cursor:pointer;
    margin-top:16px; padding:6px;
}
#diagnostika-page .skip:hover{color:var(--text)}

#diagnostika-page .done-state{text-align:center; padding:18px 0}
#diagnostika-page .done-state .ok{
    width:62px; height:62px; border-radius:99px;
    background:rgba(43,120,227,.12); color:var(--primary);
    display:flex; align-items:center; justify-content:center;
    font-size:30px; margin:0 auto 14px;
}
#diagnostika-page .done-state h3{font-family:var(--heading-font); font-weight:800; font-size:22px; margin:0 0 8px; color:var(--text)}
#diagnostika-page .done-state p{color:var(--muted); font-size:14.5px; margin:0; line-height:1.5}

/* ----- mobile ----- */
@media (max-width: 575px){
    #diagnostika-page .diag__card{padding:24px 18px; border-radius:14px}
    #diagnostika-page .intro h1{font-size:24px}
    #diagnostika-page .qtext{font-size:18px}
    #diagnostika-page .metricbox .big{font-size:30px}
    #diagnostika-page .metricbox .big small{font-size:16px}
}