/* =========================
­ЪЊЂ ANALYSIS WORKSPACE
========================= */

.analysis-workspace{

    width:100%;

    min-height:100vh;

    padding:32px;

    background:

        #f5f7fb;

    color:

        #111827;

    box-sizing:border-box;


    /* =========================
    🎨 TOKENS
    ========================= */

    --analysis-bg:
        #f5f7fb;

    --analysis-card:
        rgba(255,255,255,.82);

    --analysis-border:
        rgba(15,23,42,.06);

    --analysis-text:
        #111827;

    --analysis-muted:
        #6b7280;

    --analysis-shadow:
        0 10px 40px rgba(15,23,42,.06);

    --analysis-radius:
        24px;

    --analysis-primary:
        #6366f1;

    --analysis-success:
        #10b981;

    --analysis-danger:
        #ef4444;

    --analysis-warning:
        #f59e0b;
}




/* =========================
­ЪДа HEADER
========================= */




/* =========================
­ЪћЎ BACK BUTTON
========================= */

.analysis-back-btn{

    width:44px;

    height:44px;

    border:none;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    background:

        rgba(99,102,241,.08);

    color:

        #6366f1;

    transition:.25s ease;
}


.analysis-back-btn:hover{

    transform:
        translateY(-2px);

    background:

        rgba(99,102,241,.14);
}







/* =========================
­ЪЊд BODY
========================= */

.analysis-workspace-body{

    width: 100%;
}



/* =========================
­ЪЊд CARD
========================= */

.analysis-card{

    background:

        var(--analysis-card);

    border:

        1px solid
        var(--analysis-border);

    border-radius:

        var(--analysis-radius);

    overflow:hidden;

    transition:.25s ease;

    box-shadow:

        var(--analysis-shadow);

    backdrop-filter:

        blur(20px);
}


.analysis-card:hover{

    transform:
        translateY(-2px);

    box-shadow:

        0 20px 60px rgba(15,23,42,.08);
}



/* =========================
­ЪДа CARD HEADER
========================= */

.analysis-card-header{

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 18px 20px;

    border-bottom:
        1px solid rgba(255,255,255,.06);
}

.analysis-card-header h3{

    margin: 0;

    font-size: 16px;

    font-weight: 700;
}


/* =========================
­ЪЊд CARD BODY
========================= */

.analysis-card-body{

    padding: 20px;
}


/* =========================
­ЪЊі FIELD
========================= */

.analysis-field{

    display: flex;

    flex-direction: column;

    gap: 6px;

    margin-bottom: 18px;
}

.analysis-field small{

    color: #888;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: .4px;
}

.analysis-field strong{

    font-size: 15px;

    line-height: 1.6;
}


/* =========================
­ЪДа DOMAINS GRID
========================= */

.analysis-domains-grid{

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px,1fr)
        );

    gap: 16px;
}


/* =========================
­ЪДа DOMAIN CARD
========================= */

.analysis-domain-card{

    background:
        rgba(255,255,255,.03);

    border:
        1px solid rgba(255,255,255,.06);

    border-radius:
        16px;

    padding: 18px;

    display: flex;

    flex-direction: column;

    gap: 10px;

    transition:
        .25s ease;

    position: relative;

    overflow: hidden;
}

.analysis-domain-card:hover{

    transform:
        translateY(-3px);
}

.analysis-domain-card strong{

    font-size: 16px;
}

.analysis-domain-card small{

     color:   var(--analysis-muted); 
}

.analysis-domain-card span{

     color:   var(--analysis-muted); 

    line-height: 1.5;

    font-size: 13px;
}


/* =========================
­ЪЈи BADGES
========================= */

.analysis-domain-badges{

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 6px;
}

.analysis-badge{

    padding: 6px 10px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 700;

    text-transform: capitalize;
}


/* =========================
­Ъџе SEVERITY
========================= */

.analysis-badge.severity-high{

    background:
        rgba(255,77,79,.12);

    color:
        #ff4d4f;
}

.analysis-badge.severity-medium{

    background:
        rgba(255,152,0,.12);

    color:
        #ff9800;
}

.analysis-badge.severity-low{

    background:
        rgba(0,200,83,.12);

    color:
        #00c853;
}


/* =========================
­ЪЊѕ TRENDS
========================= */

.analysis-badge.trend-up{

    background:
        rgba(0,200,83,.12);

    color:
        #00c853;
}

.analysis-badge.trend-down{

    background:
        rgba(255,77,79,.12);

    color:
        #ff4d4f;
}

.analysis-badge.trend-stable{

    background:
        rgba(255,255,255,.08);

    color:
        #bbb;
}


/* =========================
­Ъџе DOMAIN STATES
========================= */

.analysis-domain-card.severity-high{

    border-color:
        rgba(255,77,79,.25);
}

.analysis-domain-card.trend-up{

    box-shadow:
        0 0 0 1px rgba(0,200,83,.08);
}

.analysis-domain-card.trend-down{

    box-shadow:
        0 0 0 1px rgba(255,77,79,.08);
}


/* =========================
­ЪЊі CHARTS
========================= */

.analysis-chart-grid{

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(320px,1fr)
        );

    gap: 20px;

    grid-column:
        1 / -1;
}

.analysis-chart-card{

    min-height: 360px;
}

.analysis-chart-wrapper{

    position: relative;

    width: 100%;

    height: 300px;
}

.analysis-chart-wrapper canvas{

    width: 100% !important;

    height: 100% !important;
}


/* =========================
­ЪЊі SIGNALS
========================= */

.analysis-signals-list{

    display: flex;

    flex-direction: column;

    gap: 12px;
}

.analysis-signal-row{

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 12px;

    background:
        rgba(255,255,255,.03);

    border-radius:
        12px;
}

.analysis-signal-row small{

     color:   var(--analysis-muted); 
}

.analysis-sidebar-rail{

    position:sticky;

    top:24px;
}
/* =========================
­ЪЊд INTERPRETATION
========================= */

.analysis-interpretation-card{

    grid-column:
        1 / -1;
}


.analysis-runtime-grid{

    display:grid;

    grid-template-columns:

        minmax(0, 1fr)
        380px;

    gap:24px;

    align-items:start;
}


@media(max-width:1200px){

    .analysis-runtime-grid{

        grid-template-columns:1fr;
    }
}

.analysis-hero-top{

    display:flex;

    align-items:center;

    gap:14px;
}



.analysis-main-column > *{

    animation:

        analysisFade .35s ease;
}


@keyframes analysisFade{

    from{

        opacity:0;

        transform:
            translateY(8px);
    }

    to{

        opacity:1;

        transform:
            translateY(0);
    }
}



/* =========================
🧠 KPI ORBS
========================= */

.analysis-metrics-orbs{

    display:grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(180px,1fr)
        );

    gap:28px;
}


.analysis-metric-orb-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:16px;
}


.analysis-metric-orb-card small{

    font-size:13px;

    font-weight:700;

    color:

        var(--analysis-muted);

    text-transform:uppercase;

    letter-spacing:.5px;
}


.analysis-metric-orb{

    width:150px;

    height:150px;

    border-radius:50%;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

background:

    conic-gradient(

        var(--orb-color)

        var(--progress),

        rgba(15,23,42,.06)
        0%

    );



    box-shadow:

        inset 0 0 0 10px rgba(255,255,255,.5),

        0 20px 40px rgba(99,102,241,.12);
}



.analysis-metric-orb{

    animation:

        orbEntrance .6s ease;
}


@keyframes orbEntrance{

    from{

        opacity:0;

        transform:
            scale(.88);
    }

    to{

        opacity:1;

        transform:
            scale(1);
    }
}




.analysis-metric-orb::before{

    content:'';

    position:absolute;

    inset:12px;

    border-radius:50%;

    background:

        white;

    box-shadow:

        inset 0 0 20px rgba(15,23,42,.04);
}


.analysis-metric-orb strong{

    position:relative;

    z-index:2;

    font-size:32px;

    font-weight:800;

    color:

        var(--analysis-text);
}




/* =========================
🚀 HERO
========================= */

.analysis-hero{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:32px;

    margin-bottom:32px;

    padding:32px;

    border-radius:32px;

    background:

        linear-gradient(

            135deg,

            rgba(99,102,241,.08),

            rgba(255,255,255,.95)

        );

    border:

        1px solid rgba(15,23,42,.06);

    box-shadow:

        0 20px 60px rgba(15,23,42,.06);
}


.analysis-hero-content{

    display:flex;

    flex-direction:column;

    gap:12px;
}


.analysis-runtime-badge{

    width:max-content;

    padding:8px 14px;

    border-radius:999px;

    background:

        rgba(99,102,241,.12);

    color:

        #6366f1;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.6px;
}


.analysis-hero h1{

    margin:0;

    font-size:42px;

    font-weight:800;

    line-height:1.1;
}


.analysis-hero p{

    margin:0;

    font-size:16px;

    color:#6b7280;
}


/* =========================
🧠 SCORE ORB
========================= */

.analysis-score-orb{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;
}


.analysis-score-ring{

    width:170px;

    height:170px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        conic-gradient(

            #6366f1 82%,

            rgba(99,102,241,.08) 0%

        );

    position:relative;

    box-shadow:

        0 20px 40px rgba(99,102,241,.18);
}


.analysis-score-ring::before{

    content:'';

    position:absolute;

    inset:14px;

    border-radius:50%;

    background:white;
}


.analysis-score-ring strong{

    position:relative;

    z-index:2;

    font-size:48px;

    font-weight:800;

    color:#111827;
}


/* =========================
📐 LAYOUT
========================= */

.analysis-runtime-layout{

    display:grid;

    grid-template-columns:

        minmax(0,1fr)
        340px;

    gap:28px;

    align-items:start;
}


.analysis-main-column{

    display:flex;

    flex-direction:column;

    gap:24px;
}


/* =========================
📌 SIDEBAR
========================= */

.analysis-sidebar-rail{

    position:sticky;

    top:24px;
}


.analysis-executive-rail{

    display:flex;

    flex-direction:column;

    gap:18px;
}


.analysis-rail-card{

    background:white;

    border-radius:24px;

    padding:24px;

    border:

        1px solid rgba(15,23,42,.06);

    box-shadow:

        0 12px 30px rgba(15,23,42,.05);
}


.analysis-rail-card small{

    display:block;

    margin-bottom:10px;

    color:#6b7280;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:.5px;
}


.analysis-rail-card strong{

    font-size:20px;

    font-weight:800;
}


/* =========================
🧠 FUNNEL FLOW
========================= */

.analysis-funnel-flow{

    display:grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(180px,1fr)
        );

    gap:24px;
}


.analysis-funnel-stage{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:16px;

    padding:24px;

    border-radius:24px;

    background:

        rgba(255,255,255,.72);

    border:

        1px solid rgba(15,23,42,.06);

    transition:.25s ease;
}


.analysis-funnel-stage:hover{

    transform:
        translateY(-3px);
}


.analysis-funnel-stage.is-weak{

    border-color:

        rgba(239,68,68,.22);

    box-shadow:

        0 10px 30px rgba(239,68,68,.08);
}


.analysis-funnel-stage small{

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:.6px;

    color:#6b7280;

    font-weight:700;
}


.analysis-funnel-orb{

    width:130px;

    height:130px;

    border-radius:50%;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        conic-gradient(

            var(--orb-color)

            var(--progress),

            rgba(15,23,42,.06)
            0%

        );
}


.analysis-funnel-orb::before{

    content:'';

    position:absolute;

    inset:12px;

    border-radius:50%;

    background:white;
}


.analysis-funnel-orb strong{

    position:relative;

    z-index:2;

    font-size:28px;

    font-weight:800;

    color:#111827;
}





/* =========================
📱 RESPONSIVE
========================= */

@media(max-width:1200px){

    .analysis-runtime-layout{

        grid-template-columns:1fr;
    }

    .analysis-sidebar-rail{

        position:relative;

        top:auto;
    }
}


@media(max-width:768px){

    .analysis-hero{

        flex-direction:column;

        align-items:flex-start;
    }

    .analysis-hero h1{

        font-size:32px;
    }

    .analysis-score-ring{

        width:140px;

        height:140px;
    }
}