/* =========================================================
   BODYCHECK REPORT
========================================================= */

* {
    box-sizing: border-box;
}


:root {

    --bc-purple: #692D90;
    --bc-purple-dark: #572577;
    --bc-purple-light: #f5eff8;

    --bc-bg: #f5f6f8;
    --bc-card: #ffffff;

    --bc-text: #202124;
    --bc-muted: #6b7280;

    --bc-border: #e5e7eb;

    --bc-success-bg: #eefbf3;
    --bc-success: #176b3a;

    --bc-radius: 18px;

    --bc-shadow:
        0 6px 24px rgba(0, 0, 0, .06);
}


/* =========================================================
   BODY
========================================================= */

html,
body {
    margin: 0;
    padding: 0;
}


body {

    min-height: 100vh;

    background:
        var(--bc-bg);

    color:
        var(--bc-text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    line-height:
        1.5;
}


/* =========================================================
   PAGE
========================================================= */

.report-page {
    width: 100%;
    min-height: 100vh;
}


/* =========================================================
   HEADER
========================================================= */

.report-header {

    width: 100%;

    background:
        #ffffff;

    border-bottom:
        1px solid var(--bc-border);
}


.report-header-inner {

    width: 100%;

    max-width:
        1100px;

    margin:
        0 auto;

    padding:
        28px 20px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        24px;
}


.report-kicker {

    margin-bottom:
        6px;

    color:
        var(--bc-purple);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


.report-header h1 {

    margin:
        0;

    font-size:
        30px;

    line-height:
        1.15;
}


.report-subtitle {

    margin:
        9px 0 0;

    color:
        var(--bc-muted);

    font-size:
        15px;
}


.report-meta {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        3px;

    color:
        var(--bc-muted);

    font-size:
        13px;

    text-align:
        right;
}


/* =========================================================
   CONTAINER
========================================================= */

.report-container {

    width:
        100%;

    max-width:
        1100px;

    margin:
        0 auto;

    padding:
        22px 20px 50px;
}


/* =========================================================
   CARDS
========================================================= */

.report-card {

    background:
        var(--bc-card);

    border:
        1px solid var(--bc-border);

    border-radius:
        var(--bc-radius);

    box-shadow:
        var(--bc-shadow);

    padding:
        24px;

    margin-bottom:
        18px;
}


.section-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:
        15px;

    margin-bottom:
        20px;
}


.section-heading h2 {

    margin:
        0;

    font-size:
        22px;
}


.section-heading p {

    margin:
        5px 0 0;

    color:
        var(--bc-muted);

    font-size:
        14px;
}


.muted {

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


/* =========================================================
   GUEST INTRO
========================================================= */

.guest-intro {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        16px;

    background:
        var(--bc-success-bg);

    border-color:
        #d8f0e0;
}


.guest-intro-icon {

    flex:
        0 0 auto;

    width:
        48px;

    height:
        48px;

    border-radius:
        50%;

    background:
        #ffffff;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--bc-success);

    font-size:
        22px;
}


.guest-intro h2 {

    margin:
        0 0 8px;

    font-size:
        22px;
}


.guest-intro p {

    margin:
        0 0 8px;

    color:
        #355244;
}


/* =========================================================
   BODY VISUAL
========================================================= */

.body-visual,
.guest-body-visual {

    position:
        relative;

    width:
        100%;

    min-height:
        360px;

    border:
        1px dashed #cbd5e1;

    border-radius:
        18px;

    background:
        linear-gradient(
            180deg,
            #fafbfc,
            #f3f4f6
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;
}


.body-placeholder {

    width:
        180px;

    height:
        270px;

    border:
        2px dashed #cbd5e1;

    border-radius:
        90px 90px 45px 45px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #9ca3af;

    text-align:
        center;

    padding:
        20px;

    font-size:
        14px;
}


.guest-visual-title {

    position:
        absolute;

    top:
        16px;

    left:
        18px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #6b7280;

    font-size:
        13px;
}


.guest-body-placeholder {

    position:
        relative;

    width:
        155px;

    height:
        290px;

    opacity:
        .32;
}


.placeholder-head {

    position:
        absolute;

    top:
        0;

    left:
        50%;

    width:
        54px;

    height:
        54px;

    transform:
        translateX(-50%);

    border:
        4px solid #9ca3af;

    border-radius:
        50%;
}


.placeholder-body {

    position:
        absolute;

    top:
        63px;

    left:
        50%;

    width:
        70px;

    height:
        105px;

    transform:
        translateX(-50%);

    border:
        4px solid #9ca3af;

    border-radius:
        35px 35px 18px 18px;
}


.placeholder-leg {

    position:
        absolute;

    top:
        164px;

    width:
        4px;

    height:
        110px;

    background:
        #9ca3af;

    border-radius:
        4px;
}


.placeholder-leg.left {

    left:
        calc(50% - 15px);

    transform:
        rotate(3deg);
}


.placeholder-leg.right {

    left:
        calc(50% + 11px);

    transform:
        rotate(-3deg);
}


.guest-visual-lock {

    position:
        absolute;

    left:
        50%;

    bottom:
        18px;

    transform:
        translateX(-50%);

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    width:
        calc(100% - 36px);

    max-width:
        420px;

    padding:
        11px 15px;

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

    border:
        1px solid #e5e7eb;

    border-radius:
        10px;

    color:
        #6b7280;

    font-size:
        13px;

    text-align:
        center;
}


/* =========================================================
   ANALYSIS FACTS
========================================================= */

.analysis-facts {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        10px;

    margin-top:
        14px;
}


.analysis-facts > div {

    padding:
        13px;

    border-radius:
        12px;

    background:
        #f8fafc;

    border:
        1px solid #edf0f3;
}


.analysis-facts span {

    display:
        block;

    color:
        var(--bc-muted);

    font-size:
        12px;

    margin-bottom:
        4px;
}


.analysis-facts strong {

    display:
        block;

    font-size:
        15px;
}


/* =========================================================
   LOCKED VALUES
========================================================= */

.locked-label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        7px 11px;

    border-radius:
        999px;

    background:
        var(--bc-purple-light);

    color:
        var(--bc-purple);

    font-size:
        12px;

    font-weight:
        700;
}


.locked-value-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        12px;
}


.locked-value-card {

    position:
        relative;

    min-height:
        115px;

    padding:
        17px;

    border:
        1px solid var(--bc-border);

    border-radius:
        14px;

    background:
        #ffffff;

    overflow:
        hidden;
}


.locked-value-card > span {

    display:
        block;

    color:
        var(--bc-muted);

    font-size:
        13px;
}


.locked-value-card small {

    display:
        block;

    margin-top:
        6px;

    color:
        #9ca3af;

    font-size:
        11px;
}


.blurred-value {

    display:
        inline-block;

    margin-top:
        11px;

    color:
        #374151;

    font-size:
        25px;

    letter-spacing:
        .03em;

    filter:
        blur(5px);

    user-select:
        none;

    pointer-events:
        none;
}


.affiliate-unlocked .blurred-value {

    filter:
        none;
}

/* =========================================================
   LOCKED MESSAGE
========================================================= */

.locked-message {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    margin-top:
        17px;

    padding:
        15px;

    border-radius:
        13px;

    background:
        var(--bc-purple-light);

    color:
        #4b3a55;
}


.locked-message > i {

    color:
        var(--bc-purple);

    margin-top:
        3px;
}


.locked-message strong {

    display:
        block;

    margin-bottom:
        3px;
}


.locked-message p {

    margin:
        0;

    font-size:
        13px;

    line-height:
        1.55;
}


/* =========================================================
   ACCOUNT CARD
========================================================= */

.account-card {

    border:
        2px solid #e2d7e8;
}


.account-card-header {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        22px;
}


.account-card-icon {

    flex:
        0 0 auto;

    width:
        48px;

    height:
        48px;

    border-radius:
        50%;

    background:
        var(--bc-purple-light);

    color:
        var(--bc-purple);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        20px;
}


.account-card-header h2 {

    margin:
        0 0 4px;

    font-size:
        21px;
}


.account-card-header p {

    margin:
        0;

    color:
        var(--bc-muted);

    font-size:
        14px;
}


/* =========================================================
   FORM
========================================================= */

.report-login-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        15px;
}


.form-field {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


.form-field label {

    font-size:
        13px;

    font-weight:
        700;

    color:
        #374151;
}


.form-field input {

    width:
        100%;

    min-height:
        48px;

    padding:
        11px 13px;

    border:
        1px solid #d1d5db;

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        #1f2937;

    font:
        inherit;

    font-size:
        15px;

    outline:
        none;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}


.form-field input:focus {

    border-color:
        var(--bc-purple);

    box-shadow:
        0 0 0 3px
        rgba(105,45,144,.10);
}


/* =========================================================
   BUTTONS
========================================================= */

.report-primary-button,
.report-secondary-button {

    width:
        100%;

    min-height:
        48px;

    border-radius:
        10px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    font-size:
        15px;

    font-weight:
        700;

    text-decoration:
        none;

    cursor:
        pointer;
}


.report-primary-button {

    border:
        0;

    background:
        var(--bc-purple);

    color:
        #ffffff;

    font:
        inherit;

    font-weight:
        700;
}


.report-primary-button:hover {

    background:
        var(--bc-purple-dark);
}


.report-secondary-button {

    border:
        1px solid var(--bc-purple);

    background:
        #ffffff;

    color:
        var(--bc-purple);
}


.report-secondary-button:hover {

    background:
        var(--bc-purple-light);
}


.register-divider {

    position:
        relative;

    margin:
        22px 0;

    text-align:
        center;
}


.register-divider::before {

    content:
        "";

    position:
        absolute;

    top:
        50%;

    left:
        0;

    right:
        0;

    height:
        1px;

    background:
        var(--bc-border);
}


.register-divider span {

    position:
        relative;

    padding:
        0 12px;

    background:
        #ffffff;

    color:
        #9ca3af;

    font-size:
        12px;
}


.account-note {

    margin:
        15px 0 0;

    color:
        var(--bc-muted);

    font-size:
        12px;

    line-height:
        1.5;

    text-align:
        center;
}


/* =========================================================
   SUMMARY
========================================================= */

.summary-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        12px;
}


.summary-item {

    padding:
        16px;

    border:
        1px solid var(--bc-border);

    border-radius:
        14px;

    background:
        #f8fafc;
}


.summary-item span {

    display:
        block;

    color:
        var(--bc-muted);

    font-size:
        12px;

    margin-bottom:
        5px;
}


.summary-item strong {

    font-size:
        20px;
}


/* =========================================================
   METRIC
========================================================= */

.metric-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        15px;
}


.metric-card {

    border:
        1px solid var(--bc-border);

    border-radius:
        15px;

    padding:
        18px;

    background:
        #ffffff;
}


.metric-card-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        14px;
}


.metric-card-header h3 {

    margin:
        0;

    font-size:
        18px;
}


.metric-card-header span {

    color:
        #9ca3af;

    font-size:
        11px;
}


.metric-sides {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        10px;
}


.metric-sides > div {

    padding:
        13px;

    border-radius:
        11px;

    background:
        #f8fafc;

    text-align:
        center;
}


.metric-sides small {

    display:
        block;

    color:
        var(--bc-muted);

    font-size:
        12px;

    margin-bottom:
        4px;
}


.metric-sides strong {

    font-size:
        22px;
}


.metric-asymmetry {

    margin-top:
        12px;

    padding:
        12px;

    border-radius:
        11px;

    background:
        var(--bc-purple-light);

    color:
        #5c4870;

    font-size:
        12px;

    text-align:
        center;
}


.metric-asymmetry strong {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--bc-purple);

    font-size:
        22px;
}


.metric-explanation {

    margin:
        12px 0 0;

    color:
        var(--bc-muted);

    font-size:
        13px;
}


/* =========================================================
   EMPTY
========================================================= */

.empty-state {

    padding:
        35px 20px;

    text-align:
        center;

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


.empty-state i {

    margin-bottom:
        10px;

    font-size:
        28px;

    color:
        #c2c7cf;
}


/* =========================================================
   TECHNICAL
========================================================= */

.technical-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        10px;

    margin-top:
        17px;
}


.technical-grid > div {

    padding:
        12px;

    border-radius:
        10px;

    background:
        #f8fafc;
}


.technical-grid span {

    display:
        block;

    color:
        var(--bc-muted);

    font-size:
        11px;

    margin-bottom:
        4px;
}


.technical-grid strong {

    display:
        block;

    font-size:
        13px;

    overflow-wrap:
        anywhere;
}


details summary {

    cursor:
        pointer;

    font-weight:
        700;

    color:
        #374151;
}


/* =========================================================
   FOOTER
========================================================= */

.report-footer {

    width:
        100%;

    max-width:
        1100px;

    margin:
        0 auto;

    padding:
        0 20px 40px;
}


.report-footer p {

    margin:
        0;

    color:
        #8b929c;

    font-size:
        12px;

    line-height:
        1.55;

    text-align:
        center;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .locked-value-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .summary-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .technical-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .analysis-facts {

        grid-template-columns:
            1fr;
    }


    .metric-grid {

        grid-template-columns:
            1fr;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .report-header-inner {

        padding:
            21px 14px;

        flex-direction:
            column;

        gap:
            12px;
    }


    .report-header h1 {

        font-size:
            25px;
    }


    .report-meta {

        align-items:
            flex-start;

        text-align:
            left;
    }


    .report-container {

        padding:
            14px 10px 35px;
    }


    .report-card {

        padding:
            17px;

        border-radius:
            15px;
    }


    .guest-intro {

        flex-direction:
            column;
    }


    .guest-body-visual,
    .body-visual {

        min-height:
            320px;
    }


    .locked-value-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            9px;
    }


    .locked-value-card {

        min-height:
            105px;

        padding:
            13px;
    }


    .blurred-value {

        font-size:
            21px;
    }


    .summary-grid {

        grid-template-columns:
            1fr 1fr;
    }


    .metric-sides {

        grid-template-columns:
            1fr 1fr;
    }


    .technical-grid {

        grid-template-columns:
            1fr;
    }


    .section-heading {

        flex-direction:
            column;
    }


    .locked-label {

        align-self:
            flex-start;
    }


    .report-footer {

        padding:
            0 14px 30px;
    }
}


/* =========================================================
   SEHR KLEINE GERÄTE
========================================================= */

@media (max-width: 380px) {

    .locked-value-grid {

        grid-template-columns:
            1fr;
    }


    .summary-grid {

        grid-template-columns:
            1fr;
    }
}

canvas#report-analysis-canvas {
    width: 100%;
}