* {
    box-sizing: border-box;
}


body {
    color: #ffffff;

    font-family: Arial, sans-serif;

    margin: 0;

    padding: 40px;

    background-color: #050b1a;

background-image:
    linear-gradient(
        rgba(3, 9, 25, 0.62),
        rgba(3, 9, 25, 0.72)
    ),
    url("../assets/images/galaxy-bg.png");

background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;

min-height: 100vh;
}


main {
    max-width: 900px;

    margin: 0 auto;
}


#quizArea {
    margin-top: 30px;
}


/* =========================
   題目
========================= */

#questionText {
    margin-bottom: 24px;

    line-height: 1.5;
}


/* =========================
   作答說明
========================= */

#answerGuide {
    margin-bottom: 24px;

    padding: 14px 16px;

    border-radius: 8px;

    background: #ffffff;

    border: 1px solid #dddddd;
}


#answerGuide p {
    margin: 6px 0 0;

    color: #666;

    font-size: 14px;
}


/* =========================
   已選答案區
========================= */

#selectedSection {
    margin-bottom: 28px;
}


#selectedSection h3,
#optionsSection h3 {
    margin-bottom: 10px;
}


#selectedArea {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


/* =========================
   順位區塊
========================= */

.rank-block {
    padding: 10px 12px;

    border: 1px solid #d0d0d0;

    border-radius: 8px;

    background: #ffffff;
}


.rank-title {
    margin-bottom: 6px;

    font-size: 13px;

    font-weight: bold;

    color: #666;
}


.rank-content {
    min-height: 46px;

    display: flex;

    align-items: center;

    border-radius: 6px;

    color: #999;
}


.rank-content.drag-over {
    outline: 2px dashed #888;

    background: #eeeeee;
}


.rank-hint {
    margin: 2px 4px;

    font-size: 13px;

    color: #666;
}


/* =========================
   答案區
========================= */

#optionsSection {
    margin-top: 24px;
}


.option-help {
    margin-top: -4px;

    margin-bottom: 12px;

    color: #777;

    font-size: 14px;
}


#optionsArea {
    display: grid;

    /* 電腦版：3 欄 × 2 排 */
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 12px;
}


#optionsArea.drag-over {
    padding: 8px;

    outline: 2px dashed #aaa;

    border-radius: 8px;
}


/* =========================
   答案卡片
========================= */

.option-card {
    width: 100%;

    padding: 13px 16px;

    border: 1px solid #999;

    border-radius: 7px;

    background: #ffffff;

    cursor: pointer;

    line-height: 1.5;

    user-select: none;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}


.option-card:hover {
    transform: translateY(-1px);

    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}


.option-card.selected-card {
    border: 2px solid #555;

    background: #fafafa;

    cursor: grab;
}


.option-card.selected-card:active {
    cursor: grabbing;
}


.option-card.dragging {
    opacity: 0.45;
}


/* =========================
   導覽
========================= */

button {
    padding: 12px 20px;

    font-size: 16px;

    cursor: pointer;
}


button:disabled {
    opacity: 0.4;

    cursor: not-allowed;
}


#navigationArea {
    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 32px;
}


#progressText {
    min-width: 70px;

    text-align: center;

    font-weight: bold;
}


#restartArea {
    margin-top: 22px;
}


/* =========================
   手機
========================= */

@media (max-width: 600px) {

    body {
        padding: 20px;
    }


    h1 {
        font-size: 27px;
    }


    #questionText {
        font-size: 21px;
    }


    #navigationArea {
        justify-content: space-between;
    }


    button {
        padding: 10px 14px;

        font-size: 14px;
    }

        #optionsArea {
        /* 手機版：2 欄 × 3 排 */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

/* =========================
   Result / Radar Chart
========================= */

#resultSection {
    margin-top: 36px;
    padding-top: 24px;

    border-top: 1px solid #dddddd;
}


#resultSection h3 {
    margin-bottom: 6px;
}


.result-help {
    margin-top: 0;
    margin-bottom: 16px;

    font-size: 14px;
    color: #666;
}


.radar-wrapper {
    width: 100%;
    height: 420px;

    margin-bottom: 18px;

    padding: 16px;

    border: 1px solid #dddddd;
    border-radius: 10px;

    background: #ffffff;
}


#showResultButton {
    margin-bottom: 20px;
}


@media (max-width: 600px) {

    .radar-wrapper {
        height: 320px;
        padding: 8px;
    }

}

/* =========================
   Result Summary
========================= */

.result-summary {
    margin-bottom: 20px;
}


.result-summary h4 {
    margin-bottom: 12px;

    font-size: 18px;
}


.summary-grid {
    display: grid;

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

    gap: 12px;
}


.summary-card {
    padding: 16px;

    border: 1px solid #dddddd;

    border-radius: 8px;

    background: #ffffff;
}


.summary-label {
    margin-bottom: 6px;

    font-size: 13px;

    color: #777;
}


.summary-value {
    font-size: 18px;

    font-weight: bold;

    line-height: 1.4;
}


@media (max-width: 600px) {

    .summary-grid {
        grid-template-columns:
            1fr;
    }

}

/* ========================================
   Step 35 - Result Page
======================================== */


/* ========================================
   Result Page
======================================== */

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

    padding: 72px 24px 96px;

    background: #f7f7f7;
}


.result-page[hidden] {
    display: none;
}


.result-page__container {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;
}



/* ========================================
   Result Header
======================================== */

.result-page__header {
    margin-bottom: 56px;

    text-align: center;
}


.result-page__eyebrow {
    margin: 0 0 12px;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.16em;

    color: #777;
}


.result-page__title {
    margin: 0;

    font-size: 40px;
    line-height: 1.25;

    color: #222;
}


.result-page__description {
    max-width: 620px;

    margin: 18px auto 0;

    font-size: 16px;
    line-height: 1.8;

    color: #666;
}



/* ========================================
   Result Main
======================================== */

.result-page__main {
    display: flex;
    flex-direction: column;

    gap: 28px;
}



/* ========================================
   Result Section
======================================== */

.result-section {
    padding: 32px;

    background: #fff;

    border: 1px solid #e8e8e8;
    border-radius: 18px;
}


.result-section__header {
    display: flex;
    align-items: flex-start;

    gap: 18px;

    margin-bottom: 24px;
}


.result-section__number {
    flex: 0 0 auto;

    margin: 4px 0 0;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.08em;

    color: #999;
}


.result-section__title {
    margin: 0;

    font-size: 22px;
    line-height: 1.4;

    color: #222;
}


.result-section__description {
    margin: 6px 0 0;

    font-size: 14px;
    line-height: 1.7;

    color: #777;
}



/* ========================================
   Placeholder
======================================== */

.result-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 120px;

    padding: 24px;

    border: 1px dashed #ccc;
    border-radius: 12px;

    background: #fafafa;

    text-align: center;
}


.result-placeholder p {
    margin: 0;

    font-size: 14px;
    line-height: 1.7;

    color: #888;
}



/* ========================================
   Result Page Mobile
======================================== */

@media (max-width: 767px) {

    .result-page {
        padding:
            48px
            16px
            72px;
    }


    .result-page__header {
        margin-bottom: 36px;
    }


    .result-page__title {
        font-size: 30px;
    }


    .result-page__description {
        font-size: 15px;
    }


    .result-page__main {
        gap: 20px;
    }


    .result-section {
        padding: 24px 18px;
    }


    .result-section__header {
        gap: 12px;
    }


    .result-section__title {
        font-size: 19px;
    }

}

/* ========================================
   Step 35-2
   Attribute Result Summary
======================================== */


/* ========================================
   Summary Grid
======================================== */

.result-summary-grid {
    display: grid;

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

    gap: 18px;
}



/* ========================================
   Attribute Card
======================================== */

.attribute-result-card {
    padding: 22px;

    border: 1px solid #e8e8e8;
    border-radius: 14px;

    background: #fff;
}


.attribute-result-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 18px;
}


.attribute-result-card__title {
    margin: 0;

    font-size: 18px;
    line-height: 1.4;

    color: #222;
}


.attribute-result-card__id {
    flex: 0 0 auto;

    padding: 4px 8px;

    border-radius: 999px;

    background: #f3f3f3;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 0.04em;

    color: #888;
}



/* ========================================
   Percentage
======================================== */

.attribute-result-card__share {
    margin: 0 0 18px;

    font-size: 32px;
    font-weight: 700;
    line-height: 1;

    color: #222;
}



/* ========================================
   Raw Score
======================================== */

.attribute-result-card__score-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 12px;

    font-size: 13px;

    color: #777;
}


.attribute-result-card__score-row strong {
    font-size: 14px;

    color: #333;
}



/* ========================================
   Progress Bar
======================================== */

.attribute-result-card__progress {
    width: 100%;
    height: 7px;

    overflow: hidden;

    border-radius: 999px;

    background: #eeeeee;
}


.attribute-result-card__progress-bar {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background: #555;

    transition:
        width 0.4s ease;
}



/* ========================================
   Empty Message
======================================== */

.result-summary-message {
    grid-column: 1 / -1;

    margin: 0;

    padding: 28px;

    text-align: center;

    font-size: 14px;

    color: #888;
}



/* ========================================
   Tablet
======================================== */

@media (max-width: 900px) {

    .result-summary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}



/* ========================================
   Mobile
======================================== */

@media (max-width: 600px) {

    .result-summary-grid {
        grid-template-columns:
            1fr;
    }


    .attribute-result-card {
        padding: 20px;
    }


    .attribute-result-card__share {
        font-size: 28px;
    }

}

/* ========================================
   Step 35-3
   Result Page Radar Chart
======================================== */


.result-radar {
    width: 100%;
}


.result-radar__chart {
    position: relative;

    width: 100%;
    max-width: 620px;
    height: 520px;

    margin: 0 auto;
}


.result-radar__chart canvas {
    width: 100% !important;
    height: 100% !important;
}



/* ========================================
   Tablet
======================================== */

@media (max-width: 900px) {

    .result-radar__chart {
        max-width: 560px;
        height: 460px;
    }

}



/* ========================================
   Mobile
======================================== */

@media (max-width: 600px) {

    .result-radar__chart {
        height: 360px;
    }

}

/* ========================================
   Step 35-4
   Result Ranking
======================================== */


/* ========================================
   Ranking Grid
======================================== */

.result-ranking-grid {
    display: grid;

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

    gap: 18px;
}



/* ========================================
   Ranking Card
======================================== */

.result-ranking-card {
    min-width: 0;

    padding: 24px;

    border: 1px solid #e8e8e8;
    border-radius: 14px;

    background: #fff;
}


.result-ranking-card__heading {
    margin: 0 0 14px;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.05em;

    color: #888;
}


.result-ranking-card__attributes {
    margin: 0 0 12px;

    font-size: 20px;
    line-height: 1.5;

    color: #222;
}


.result-ranking-card__share {
    margin: 0 0 18px;

    font-size: 30px;
    font-weight: 700;
    line-height: 1;

    color: #222;
}



/* ========================================
   Raw Scores
======================================== */

.result-ranking-card__scores {
    display: flex;
    flex-direction: column;

    gap: 6px;

    padding-top: 14px;

    border-top: 1px solid #eeeeee;
}


.result-ranking-card__scores span {
    font-size: 12px;
    line-height: 1.5;

    color: #777;
}



/* ========================================
   Tablet / Mobile
======================================== */

@media (max-width: 800px) {

    .result-ranking-grid {
        grid-template-columns:
            1fr;
    }


    .result-ranking-card {
        padding: 22px;
    }

}

/* ========================================
   Step 35-5
   Result Classification
======================================== */


.result-classification {
    width: 100%;
}


.result-classification-card {
    padding: 28px;

    border: 1px solid #e8e8e8;
    border-radius: 14px;

    background: #fff;
}



/* ========================================
   Status Badge
======================================== */

.result-classification-card__badge {
    display: inline-flex;
    align-items: center;

    margin-bottom: 16px;

    padding: 6px 10px;

    border-radius: 999px;

    background: #f1f1f1;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.04em;

    color: #777;
}



/* ========================================
   Title
======================================== */

.result-classification-card__title {
    margin: 0 0 12px;

    font-size: 22px;
    line-height: 1.4;

    color: #222;
}



/* ========================================
   Description
======================================== */

.result-classification-card__description {
    max-width: 720px;

    margin: 0;

    font-size: 15px;
    line-height: 1.8;

    color: #666;
}



/* ========================================
   Detail
======================================== */

.result-classification-card__detail {
    margin-top: 22px;

    padding-top: 18px;

    border-top: 1px solid #eeeeee;
}


.result-classification-card__detail p {
    margin: 6px 0;

    font-size: 14px;
    line-height: 1.7;

    color: #555;
}



/* ========================================
   Mobile
======================================== */

@media (max-width: 600px) {

    .result-classification-card {
        padding: 22px;
    }


    .result-classification-card__title {
        font-size: 20px;
    }

}

/* ========================================
   Step 35-6
   Free Report Preview
======================================== */


.result-free-report {
    width: 100%;
}



/* ========================================
   Intro
======================================== */

.result-free-report__intro {
    margin-bottom: 22px;

    padding: 24px;

    border: 1px solid #e8e8e8;
    border-radius: 14px;

    background: #fff;
}


.result-free-report__badge {
    display: inline-flex;

    margin-bottom: 14px;

    padding: 6px 10px;

    border-radius: 999px;

    background: #f1f1f1;

    font-size: 11px;
    font-weight: 700;

    color: #777;
}


.result-free-report__title {
    margin: 0 0 10px;

    font-size: 22px;
    line-height: 1.4;

    color: #222;
}


.result-free-report__description {
    max-width: 760px;

    margin: 0;

    font-size: 15px;
    line-height: 1.8;

    color: #666;
}



/* ========================================
   Free Report List
======================================== */

.free-report-list {
    display: grid;

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

    gap: 16px;
}


.free-report-item {
    min-width: 0;

    padding: 20px;

    border: 1px solid #e8e8e8;
    border-radius: 12px;

    background: #fff;
}


.free-report-item__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 14px;
}


.free-report-item__title {
    margin: 0;

    font-size: 16px;
    line-height: 1.5;

    color: #222;
}


.free-report-item__status {
    flex: 0 0 auto;

    padding: 4px 8px;

    border-radius: 999px;

    background: #f2f2f2;

    font-size: 10px;
    font-weight: 700;

    color: #777;
}


.free-report-item__content {
    margin: 0;

    font-size: 14px;
    line-height: 1.7;

    color: #666;
}


.free-report-item__content--pending {
    color: #999;
}


.free-report-empty {
    grid-column: 1 / -1;

    margin: 0;

    padding: 24px;

    border: 1px dashed #d8d8d8;
    border-radius: 12px;

    text-align: center;

    font-size: 14px;

    color: #888;
}



/* ========================================
   Mobile
======================================== */

@media (max-width: 700px) {

    .free-report-list {
        grid-template-columns:
            1fr;
    }


    .result-free-report__intro {
        padding: 22px;
    }

}

/* ========================================
   Step 35-7
   Paid Report Locked Preview
======================================== */


.result-paid-report {
    width: 100%;
}



/* ========================================
   Intro
======================================== */

.result-paid-report__intro {
    margin-bottom: 22px;

    padding: 26px;

    border: 1px solid #e4e4e4;
    border-radius: 14px;

    background: #f8f8f8;
}


.result-paid-report__badge {
    display: inline-flex;

    margin-bottom: 14px;

    padding: 6px 10px;

    border-radius: 999px;

    background: #e9e9e9;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.04em;

    color: #666;
}


.result-paid-report__title {
    margin: 0 0 10px;

    font-size: 22px;
    line-height: 1.4;

    color: #222;
}


.result-paid-report__description {
    max-width: 760px;

    margin: 0;

    font-size: 15px;
    line-height: 1.8;

    color: #666;
}



/* ========================================
   Paid Sections
======================================== */

.paid-report-list {
    display: grid;

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

    gap: 16px;
}


.paid-report-item {
    min-width: 0;

    padding: 20px;

    border: 1px solid #e8e8e8;
    border-radius: 12px;

    background: #fff;
}


.paid-report-item__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 14px;
}


.paid-report-item__title {
    margin: 0;

    font-size: 16px;
    line-height: 1.5;

    color: #222;
}


.paid-report-item__badge {
    flex: 0 0 auto;

    padding: 4px 8px;

    border-radius: 999px;

    background: #eeeeee;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.04em;

    color: #777;
}


.paid-report-item__description {
    margin: 0;

    font-size: 14px;
    line-height: 1.7;

    color: #888;
}



/* ========================================
   CTA
======================================== */

.paid-report-cta {
    margin-top: 22px;

    padding: 26px;

    border: 1px solid #dddddd;
    border-radius: 14px;

    text-align: center;

    background: #fafafa;
}


.paid-report-cta h4 {
    margin: 0 0 8px;

    font-size: 20px;

    color: #222;
}


.paid-report-cta p {
    max-width: 600px;

    margin: 0 auto 18px;

    font-size: 14px;
    line-height: 1.7;

    color: #777;
}


.paid-report-cta__button {
    min-width: 200px;

    padding: 12px 18px;

    border: 0;
    border-radius: 10px;

    font-size: 14px;
    font-weight: 700;
}


.paid-report-cta__button:disabled {
    cursor: not-allowed;

    opacity: 0.55;
}


.paid-report-empty {
    grid-column: 1 / -1;

    margin: 0;

    padding: 24px;

    border: 1px dashed #d8d8d8;
    border-radius: 12px;

    text-align: center;

    font-size: 14px;

    color: #888;
}



/* ========================================
   Mobile
======================================== */

@media (max-width: 700px) {

    .paid-report-list {
        grid-template-columns:
            1fr;
    }


    .result-paid-report__intro,
    .paid-report-cta {
        padding: 22px;
    }

}

/* =========================================================
   Step 35-8
   Result Page UI Polish
   ========================================================= */


/* =========================================================
   Result Page Design Tokens
   ========================================================= */

.result-page {

    --result-bg:
        #f5f6f8;

    --result-surface:
        #ffffff;

    --result-surface-soft:
        #f8f9fb;

    --result-text:
        #20232a;

    --result-text-secondary:
        #666d78;

    --result-text-muted:
        #9298a3;

    --result-border:
        #e5e8ed;

    --result-accent:
        #5967a8;

    --result-accent-soft:
        #eef0fa;

    --result-dark:
        #272b35;

    --result-shadow:
        0 10px 30px
        rgba(32, 35, 42, 0.06);


    width:
        100%;

    min-height:
        100vh;

    padding:
        72px 24px 110px;

    background:
        var(--result-bg);

    color:
        var(--result-text);
}


/* =========================================================
   Main Container
   ========================================================= */

.result-page__container {

    width:
        100%;

    max-width:
        1120px;

    margin:
        0 auto;

}


/* =========================================================
   Page Header
   ========================================================= */

.result-page__header {

    max-width:
        760px;

    margin:
        0 auto 64px;

    text-align:
        center;

}


.result-page__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 0 16px;

    padding:
        7px 12px;

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

    border-radius:
        999px;

    background:
        var(--result-surface);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    color:
        var(--result-accent);

}


.result-page__title {

    margin:
        0;

    font-size:
        clamp(
            34px,
            5vw,
            52px
        );

    font-weight:
        750;

    line-height:
        1.18;

    letter-spacing:
        -0.025em;

    color:
        var(--result-text);

}


.result-page__description {

    max-width:
        620px;

    margin:
        20px auto 0;

    font-size:
        16px;

    line-height:
        1.85;

    color:
        var(--result-text-secondary);

}


/* =========================================================
   Result Main
   ========================================================= */

.result-page__main {

    display:
        flex;

    flex-direction:
        column;

    gap:
        30px;

}


/* =========================================================
   Main Result Sections
   ========================================================= */

.result-section {

    position:
        relative;

    overflow:
        hidden;

    padding:
        36px;

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

    border-radius:
        20px;

    background:
        var(--result-surface);

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

}


/* =========================================================
   Section Header
   ========================================================= */

.result-section__header {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        18px;

    margin-bottom:
        28px;

}


.result-section__number {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 42px;

    width:
        42px;

    height:
        42px;

    margin:
        0;

    border-radius:
        12px;

    background:
        var(--result-accent-soft);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        0.06em;

    color:
        var(--result-accent);

}


.result-section__title {

    margin:
        0;

    font-size:
        23px;

    font-weight:
        700;

    line-height:
        1.35;

    letter-spacing:
        -0.01em;

    color:
        var(--result-text);

}


.result-section__description {

    margin:
        7px 0 0;

    font-size:
        14px;

    line-height:
        1.7;

    color:
        var(--result-text-secondary);

}


/* =========================================================
   01 - Attribute Result Cards
   ========================================================= */

.result-summary-grid {

    display:
        grid;

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

    gap:
        16px;

}


.attribute-result-card {

    position:
        relative;

    padding:
        22px;

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

    border-radius:
        16px;

    background:
        var(--result-surface-soft);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;

}


.attribute-result-card:hover {

    transform:
        translateY(-2px);

    border-color:
        #d6dbea;

    box-shadow:
        0 10px 24px
        rgba(32, 35, 42, 0.07);

}


.attribute-result-card__header {

    margin-bottom:
        20px;

}


.attribute-result-card__title {

    font-size:
        17px;

    font-weight:
        700;

    color:
        var(--result-text);

}


.attribute-result-card__id {

    padding:
        5px 9px;

    background:
        #eceef3;

    color:
        var(--result-text-muted);

}


.attribute-result-card__share {

    margin:
        0 0 20px;

    font-size:
        34px;

    font-weight:
        800;

    letter-spacing:
        -0.025em;

    color:
        var(--result-accent);

}


.attribute-result-card__score-row {

    color:
        var(--result-text-secondary);

}


.attribute-result-card__score-row strong {

    color:
        var(--result-text);

}


.attribute-result-card__progress {

    height:
        7px;

    background:
        #e2e5eb;

}


.attribute-result-card__progress-bar {

    background:
        var(--result-accent);

}


/* =========================================================
   02 - Radar
   ========================================================= */

.result-radar {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        18px;

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

    border-radius:
        16px;

    background:
        var(--result-surface-soft);

}


.result-radar__chart {

    width:
        100%;

    max-width:
        640px;

    height:
        520px;

    margin:
        0 auto;

}


/* =========================================================
   03 - Ranking
   ========================================================= */

.result-ranking-grid {

    display:
        grid;

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

    gap:
        16px;

}


.result-ranking-card {

    position:
        relative;

    padding:
        24px;

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

    border-radius:
        16px;

    background:
        var(--result-surface-soft);

}


.result-ranking-card__heading {

    margin-bottom:
        16px;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    color:
        var(--result-text-muted);

}


.result-ranking-card__attributes {

    min-height:
        48px;

    margin-bottom:
        14px;

    font-size:
        20px;

    font-weight:
        700;

    color:
        var(--result-text);

}


.result-ranking-card__share {

    font-size:
        30px;

    color:
        var(--result-accent);

}


.result-ranking-card__scores {

    border-top:
        1px solid
        var(--result-border);

}


.result-ranking-card__scores span {

    color:
        var(--result-text-secondary);

}


/* =========================================================
   Ranking Accent
   ========================================================= */

.result-ranking-card--highest {

    border-top:
        4px solid
        var(--result-accent);

}


.result-ranking-card--second {

    border-top:
        4px solid
        #8d96b8;

}


.result-ranking-card--lowest {

    border-top:
        4px solid
        #b9beca;

}


/* =========================================================
   04 - Classification
   ========================================================= */

.result-classification-card {

    padding:
        28px;

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

    border-radius:
        16px;

    background:
        var(--result-surface-soft);

}


.result-classification-card__badge {

    background:
        var(--result-accent-soft);

    color:
        var(--result-accent);

}


.result-classification-card__title {

    font-size:
        24px;

    color:
        var(--result-text);

}


.result-classification-card__description {

    color:
        var(--result-text-secondary);

}


/* pending-rule */

.result-classification-card[
    data-status="pending-rule"
] {

    border-style:
        dashed;

}


/* =========================================================
   05 - Free Report
   ========================================================= */

.result-free-report__intro {

    padding:
        26px;

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

    border-radius:
        16px;

    background:
        var(--result-accent-soft);

}


.result-free-report__badge {

    background:
        var(--result-surface);

    color:
        var(--result-accent);

}


.result-free-report__title {

    color:
        var(--result-text);

}


.result-free-report__description {

    color:
        var(--result-text-secondary);

}


.free-report-list {

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

    gap:
        16px;

}


.free-report-item {

    padding:
        22px;

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

    border-radius:
        14px;

    background:
        var(--result-surface-soft);

}


.free-report-item__title {

    color:
        var(--result-text);

}


.free-report-item__status {

    background:
        #eceef3;

    color:
        var(--result-text-muted);

}


.free-report-item__content {

    color:
        var(--result-text-secondary);

}


.free-report-item__content--pending {

    font-style:
        italic;

    color:
        var(--result-text-muted);

}


/* =========================================================
   06 - Paid Report
   ========================================================= */

#result-paid-report-section {

    border:
        1px solid #d7dae4;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f7f8fc 100%
        );

}


.result-paid-report__intro {

    position:
        relative;

    padding:
        28px;

    border:
        1px solid
        #dfe2eb;

    border-radius:
        16px;

    background:
        var(--result-dark);

}


.result-paid-report__badge {

    background:
        rgba(
            255,
            255,
            255,
            0.11
        );

    color:
        #ffffff;

}


.result-paid-report__title {

    color:
        #ffffff;

}


.result-paid-report__description {

    color:
        rgba(
            255,
            255,
            255,
            0.7
        );

}


.paid-report-list {

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

    gap:
        16px;

}


.paid-report-item {

    position:
        relative;

    padding:
        22px;

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

    border-radius:
        14px;

    background:
        #fafbfc;

}


.paid-report-item__title {

    color:
        var(--result-text);

}


.paid-report-item__badge {

    background:
        #e9ebef;

    color:
        #7e8490;

}


.paid-report-item__description {

    color:
        var(--result-text-muted);

}


/* =========================================================
   Paid CTA
   ========================================================= */

.paid-report-cta {

    margin-top:
        22px;

    padding:
        30px 24px;

    border:
        1px solid
        #dfe2e9;

    border-radius:
        16px;

    background:
        var(--result-surface-soft);

}


.paid-report-cta h4 {

    font-size:
        21px;

    color:
        var(--result-text);

}


.paid-report-cta p {

    color:
        var(--result-text-secondary);

}


.paid-report-cta__button {

    min-width:
        220px;

    min-height:
        46px;

    border-radius:
        12px;

    background:
        var(--result-dark);

    color:
        #ffffff;

}


.paid-report-cta__button:disabled {

    background:
        #c7cad2;

    color:
        #ffffff;

    opacity:
        1;

}


/* =========================================================
   Better Focus / Accessibility
   ========================================================= */

.result-page button:focus-visible {

    outline:
        3px solid
        rgba(
            89,
            103,
            168,
            0.25
        );

    outline-offset:
        3px;

}


/* =========================================================
   Tablet
   ========================================================= */

@media (
    max-width: 900px
) {

    .result-page {

        padding:
            60px 20px 90px;

    }


    .result-section {

        padding:
            30px;

    }


    .result-summary-grid {

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

    }


    .result-ranking-grid {

        grid-template-columns:
            1fr;

    }


    .result-radar__chart {

        max-width:
            560px;

        height:
            460px;

    }

}


/* =========================================================
   Mobile
   ========================================================= */

@media (
    max-width: 600px
) {

    .result-page {

        padding:
            42px 14px 70px;

    }


    .result-page__header {

        margin-bottom:
            40px;

    }


    .result-page__eyebrow {

        margin-bottom:
            14px;

    }


    .result-page__title {

        font-size:
            32px;

    }


    .result-page__description {

        margin-top:
            16px;

        font-size:
            15px;

    }


    .result-page__main {

        gap:
            20px;

    }


    .result-section {

        padding:
            22px 18px;

        border-radius:
            16px;

    }


    .result-section__header {

        gap:
            12px;

        margin-bottom:
            22px;

    }


    .result-section__number {

        flex-basis:
            36px;

        width:
            36px;

        height:
            36px;

        border-radius:
            10px;

    }


    .result-section__title {

        font-size:
            19px;

    }


    .result-section__description {

        font-size:
            13px;

    }


    /* Attribute Cards */

    .result-summary-grid {

        grid-template-columns:
            1fr;

        gap:
            12px;

    }


    .attribute-result-card {

        padding:
            20px;

    }


    .attribute-result-card__share {

        font-size:
            30px;

    }


    /* Radar */

    .result-radar {

        padding:
            8px;

    }


    .result-radar__chart {

        height:
            350px;

    }


    /* Ranking */

    .result-ranking-grid {

        gap:
            12px;

    }


    /* Free / Paid */

    .free-report-list,
    .paid-report-list {

        grid-template-columns:
            1fr;

        gap:
            12px;

    }


    .result-free-report__intro,
    .result-paid-report__intro,
    .paid-report-cta {

        padding:
            22px 18px;

    }


    .free-report-item,
    .paid-report-item {

        padding:
            18px;

    }


    .paid-report-cta__button {

        width:
            100%;

        min-width:
            0;

    }

}

/* =========================================================
   Step 36-1
   Test Entry Page
   ========================================================= */


/* =========================================================
   Entry Page
   ========================================================= */

.entry-page {

    --entry-bg:
        #f5f6f8;

    --entry-surface:
        #ffffff;

    --entry-text:
        #20232a;

    --entry-text-secondary:
        #666d78;

    --entry-text-muted:
        #9298a3;

    --entry-border:
        #e5e8ed;

    --entry-accent:
        #5967a8;

    --entry-accent-soft:
        #eef0fa;


    width:
        100%;

    min-height:
        100vh;

    padding:
        72px 24px 100px;

    background:
        var(--entry-bg);

    color:
        var(--entry-text);

}


.entry-page[hidden] {

    display:
        none;

}


.entry-page__container {

    width:
        100%;

    max-width:
        900px;

    margin:
        0 auto;

}



/* =========================================================
   Entry Header
   ========================================================= */

.entry-page__header {

    max-width:
        680px;

    margin:
        0 auto 48px;

    text-align:
        center;

}


.entry-page__eyebrow {

    display:
        inline-flex;

    margin:
        0 0 16px;

    padding:
        7px 12px;

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

    border-radius:
        999px;

    background:
        var(--entry-surface);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.15em;

    color:
        var(--entry-accent);

}


.entry-page__title {

    margin:
        0;

    font-size:
        clamp(
            34px,
            5vw,
            50px
        );

    line-height:
        1.2;

    letter-spacing:
        -0.025em;

    color:
        var(--entry-text);

}


.entry-page__description {

    margin:
        18px auto 0;

    font-size:
        16px;

    line-height:
        1.8;

    color:
        var(--entry-text-secondary);

}



/* =========================================================
   Entry Card
   ========================================================= */

.entry-card {

    margin-bottom:
        22px;

    padding:
        30px;

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

    border-radius:
        18px;

    background:
        var(--entry-surface);

    box-shadow:
        0 10px 30px
        rgba(32, 35, 42, 0.05);

}


.entry-card__header {

    margin-bottom:
        24px;

}


.entry-card__step {

    margin:
        0 0 7px;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.12em;

    color:
        var(--entry-accent);

}


.entry-card__title {

    margin:
        0;

    font-size:
        23px;

    color:
        var(--entry-text);

}



/* =========================================================
   Test Info
   ========================================================= */

.entry-info-grid {

    display:
        grid;

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

    gap:
        14px;

    margin-bottom:
        28px;

}


.entry-info-item {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    padding:
        18px;

    border-radius:
        14px;

    background:
        var(--entry-accent-soft);

}


.entry-info-item strong {

    font-size:
        18px;

    color:
        var(--entry-text);

}


.entry-info-item span {

    font-size:
        12px;

    line-height:
        1.5;

    color:
        var(--entry-text-secondary);

}



/* =========================================================
   Guide
   ========================================================= */

.entry-guide {

    padding-top:
        24px;

    border-top:
        1px solid
        var(--entry-border);

}


.entry-guide h3 {

    margin:
        0 0 12px;

    font-size:
        17px;

    color:
        var(--entry-text);

}


.entry-guide p {

    margin:
        8px 0;

    font-size:
        14px;

    line-height:
        1.8;

    color:
        var(--entry-text-secondary);

}



/* =========================================================
   Placeholder
   ========================================================= */

.entry-placeholder {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        120px;

    padding:
        24px;

    border:
        1px dashed
        #cfd3dc;

    border-radius:
        14px;

    background:
        #fafbfc;

    text-align:
        center;

}


.entry-placeholder p {

    margin:
        0;

    font-size:
        14px;

    color:
        var(--entry-text-muted);

}



/* =========================================================
   Start
   ========================================================= */

.entry-start-area {

    padding:
        28px;

    text-align:
        center;

}


.entry-start-area p {

    margin:
        0 0 16px;

    font-size:
        14px;

    color:
        var(--entry-text-secondary);

}


#entry-start-button {

    min-width:
        220px;

    min-height:
        50px;

    padding:
        13px 24px;

    border:
        0;

    border-radius:
        12px;

    background:
        var(--entry-accent);

    font-size:
        15px;

    font-weight:
        700;

    color:
        #ffffff;

    cursor:
        pointer;

}


#entry-start-button:disabled {

    background:
        #c7cad2;

    cursor:
        not-allowed;

}



/* =========================================================
   Quiz Page Hidden
   ========================================================= */

#quiz-page[hidden] {

    display:
        none;

}



/* =========================================================
   Mobile
   ========================================================= */

@media (
    max-width: 650px
) {

    .entry-page {

        padding:
            46px 14px 70px;

    }


    .entry-page__header {

        margin-bottom:
            36px;

    }


    .entry-page__title {

        font-size:
            32px;

    }


    .entry-card {

        padding:
            22px 18px;

    }


    .entry-info-grid {

        grid-template-columns:
            1fr;

    }


    #entry-start-button {

        width:
            100%;

        min-width:
            0;

    }

}

/* =========================================================
   Step 36-2
   Entry Form
   ========================================================= */


.entry-form {

    display:
        grid;

    gap:
        20px;

}


.entry-form-field {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

}


.entry-form-label {

    font-size:
        14px;

    font-weight:
        700;

    color:
        var(--entry-text);

}


.entry-form-input {

    width:
        100%;

    min-height:
        48px;

    padding:
        12px 14px;

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

    border-radius:
        12px;

    background:
        #ffffff;

    font-size:
        15px;

    color:
        var(--entry-text);

    outline:
        none;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;

}


.entry-form-input::placeholder {

    color:
        #a5aab4;

}


.entry-form-input:focus {

    border-color:
        var(--entry-accent);

    box-shadow:
        0 0 0 3px
        rgba(89, 103, 168, 0.12);

}


.entry-form-help {

    margin:
        0;

    font-size:
        12px;

    line-height:
        1.6;

    color:
        var(--entry-text-muted);

}


/* Mobile */

@media (
    max-width: 650px
) {

    .entry-form {

        gap:
            18px;

    }


    .entry-form-input {

        min-height:
            46px;

        font-size:
            16px;

    }

}

/* ========================================
   Entry Form Error
   ======================================== */

.entry-form-error {
    margin-top: 6px;
    color: #d92d20 !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.entry-form-input--error {
    border-color: #d92d20 !important;
    background-color: #fff7f7;
}

.entry-form-input--error:focus {
    border-color: #d92d20 !important;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12);
}

/* ========================================
   Step 38-2B
   Cosmic Theme - Base Typography
======================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #ffffff;
}

p,
label {
    color: rgba(255, 255, 255, 0.88);
}

#questionText {
    color: #ffffff;
}

#instructionArea {
    color: rgba(255, 255, 255, 0.82);
}

#otherOptionsTitle {
    color: #ffffff;
}

/* =========================================================
   Step 38-2C
   Cosmic Quiz Theme
   ========================================================= */

/* -------------------------
   Quiz 整體區域
------------------------- */

#quiz-page {
    color: #ffffff;
}

#quizArea {
    margin-top: 32px;
}


/* -------------------------
   題目
------------------------- */

#questionText {
    margin: 0 0 20px;

    padding: 22px 24px;

    border: 1px solid rgba(118, 156, 255, 0.35);
    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(12, 31, 74, 0.92),
            rgba(8, 20, 52, 0.88)
        );

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

    color: #ffffff;

    font-size: 26px;
    line-height: 1.5;
}


/* -------------------------
   作答說明
------------------------- */

#answerGuide {
    margin-bottom: 26px;

    padding: 16px 18px;

    border: 1px solid rgba(118, 156, 255, 0.25);
    border-radius: 12px;

    background: rgba(7, 20, 50, 0.78);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.16);

    color: #ffffff;
}

#answerGuide strong {
    color: #ffffff;
}

#answerGuide p {
    margin: 6px 0 0;

    color: rgba(255, 255, 255, 0.72);
}


/* -------------------------
   你的選擇
------------------------- */

#selectedSection {
    margin-bottom: 30px;
}

#selectedSection > h3 {
    color: #ffffff;
}

#selectedArea {
    display: grid;

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

    gap: 12px;
}


/* -------------------------
   第一 / 第二 / 第三順位
   白色卡片
------------------------- */

.rank-block {
    min-width: 0;
    min-height: 112px;

    padding: 14px;

    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.96);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.18);
}

.rank-title {
    margin-bottom: 8px;

    color: #253557;

    font-size: 13px;
    font-weight: 700;
}

.rank-content {
    min-height: 52px;

    display: flex;
    align-items: center;

    color: #7d8799;
}

.rank-hint {
    color: #7d8799;
}

.rank-content.drag-over {
    outline: 2px dashed #5576c7;

    background: #eef3ff;
}


/* 已選入順位中的答案 */

.rank-block .option-card {
    border-color: #c9d4ec;

    background: #f7f9ff;

    color: #142342;

    box-shadow: none;
}


/* -------------------------
   其他選項
------------------------- */

#optionsSection {
    margin-top: 28px;
}

#optionsSection > h3 {
    color: #ffffff;
}

.option-help {
    color: rgba(255, 255, 255, 0.68);
}


/* 電腦：3 欄 × 2 排 */

#optionsArea {
    display: grid;

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

    gap: 12px;
}


/* -------------------------
   六個深藍答案
------------------------- */

#optionsArea .option-card {
    width: 100%;
    min-height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;

    border: 1px solid rgba(113, 153, 255, 0.38);
    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(17, 42, 91, 0.94),
            rgba(9, 27, 67, 0.94)
        );

    color: #ffffff;

    font-size: 16px;
    font-weight: 600;
    text-align: center;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.18);

    cursor: pointer;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}


/* Hover */

#optionsArea .option-card:hover {
    transform: translateY(-2px);

    border-color: rgba(142, 178, 255, 0.85);

    background:
        linear-gradient(
            135deg,
            rgba(28, 60, 122, 0.98),
            rgba(13, 37, 87, 0.98)
        );

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.28),
        0 0 18px rgba(83, 124, 225, 0.18);
}


/* -------------------------
   導覽按鈕
------------------------- */

#navigationArea button,
#restartArea button {
    border: 1px solid rgba(121, 157, 244, 0.42);
    border-radius: 10px;

    background: rgba(11, 30, 70, 0.9);

    color: #ffffff;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

#navigationArea button:not(:disabled):hover,
#restartArea button:not(:disabled):hover {
    transform: translateY(-1px);

    border-color: rgba(150, 183, 255, 0.85);

    background: rgba(24, 53, 112, 0.96);
}

#navigationArea button:disabled,
#restartArea button:disabled {
    opacity: 0.35;
}

#progressText {
    color: #ffffff;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 600px) {

    #questionText {
        padding: 18px;

        font-size: 21px;
    }


    /* 三個順位在手機仍先直向排列，
       避免每張卡太窄 */

    #selectedArea {
        grid-template-columns: 1fr;
    }


    /* 老闆指定：
       手機六個答案 = 2 欄 × 3 排 */

    #optionsArea {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }


    #optionsArea .option-card {
        min-height: 62px;

        padding: 13px 10px;

        font-size: 15px;
    }
}

/* =========================================================
   Result Page - Empty Placeholder Fix
   ========================================================= */

/* 尚未產生正式結果以前，
   不顯示空白的結果 Placeholder */

#result-page .result-placeholder {
    display: none;
}

/* =========================================================
   Radar Chart - Empty State Fix
   尚未產生結果前，不顯示空白雷達圖區塊
   ========================================================= */

.radar-wrapper:has(#radarChart:empty) {
    display: none;
}

/* =========================================================
   Step 38 - Cosmic Entry Page Theme
   登入／測驗入口頁：深藍卡片 + 白字
   ========================================================= */


/* ---------------------------------------------------------
   1. Entry Page 整體
   --------------------------------------------------------- */

.entry-page {
    --entry-text: #ffffff;
    --entry-text-secondary: rgba(255, 255, 255, 0.78);
    --entry-text-muted: rgba(255, 255, 255, 0.58);

    --entry-border: rgba(118, 156, 255, 0.30);
    --entry-accent: #9db9ff;
    --entry-accent-soft: rgba(32, 64, 126, 0.62);

    background: transparent;

    color: #ffffff;
}


/* ---------------------------------------------------------
   2. 最上方標題區
   --------------------------------------------------------- */

.entry-page__title {
    color: #ffffff;
}

.entry-page__description {
    color: rgba(255, 255, 255, 0.78);
}


/* PERSONALITY TEST 小標籤 */

.entry-page__eyebrow {
    border: 1px solid rgba(132, 166, 255, 0.38);

    background: rgba(9, 27, 67, 0.78);

    color: #c8d8ff;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.16);
}


/* ---------------------------------------------------------
   3. 兩張主要大卡片
   測驗說明 + 基本資料
   --------------------------------------------------------- */

.entry-card {
    border: 1px solid rgba(118, 156, 255, 0.30);

    background:
        linear-gradient(
            135deg,
            rgba(12, 31, 74, 0.94),
            rgba(7, 20, 52, 0.92)
        );

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

    color: #ffffff;
}


/* TEST INFO / YOUR INFO */

.entry-card__step {
    color: #9db9ff;
}


/* 測驗說明 / 基本資料 */

.entry-card__title {
    color: #ffffff;
}


/* ---------------------------------------------------------
   4. 測驗資訊三張小卡
   --------------------------------------------------------- */

.entry-info-item {
    border: 1px solid rgba(125, 162, 255, 0.25);

    background:
        linear-gradient(
            135deg,
            rgba(24, 55, 112, 0.82),
            rgba(13, 36, 82, 0.82)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}


.entry-info-item strong {
    color: #ffffff;
}


.entry-info-item span {
    color: rgba(255, 255, 255, 0.70);
}


/* ---------------------------------------------------------
   5. 作答方式
   --------------------------------------------------------- */

.entry-guide {
    border-top:
        1px solid rgba(135, 166, 240, 0.24);
}


.entry-guide h3 {
    color: #ffffff;
}


.entry-guide p {
    color: rgba(255, 255, 255, 0.76);
}


/* ---------------------------------------------------------
   6. 基本資料 Label
   --------------------------------------------------------- */

.entry-form-label {
    color: #ffffff;
}


/* ---------------------------------------------------------
   7. 基本資料輸入框
   --------------------------------------------------------- */

.entry-form-input {
    border:
        1px solid rgba(122, 157, 238, 0.38);

    background:
        rgba(5, 18, 46, 0.82);

    color: #ffffff;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03);

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}


/* Placeholder */

.entry-form-input::placeholder {
    color: rgba(210, 221, 245, 0.48);
}


/* 點進輸入框 */

.entry-form-input:focus {
    border-color:
        rgba(147, 181, 255, 0.90);

    background:
        rgba(8, 25, 60, 0.96);

    box-shadow:
        0 0 0 3px rgba(94, 137, 238, 0.18),
        0 0 18px rgba(75, 118, 221, 0.12);
}


/* 瀏覽器自動填入 Email / 手機時
   避免突然變成白底 */

.entry-form-input:-webkit-autofill,
.entry-form-input:-webkit-autofill:hover,
.entry-form-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;

    -webkit-box-shadow:
        0 0 0 1000px
        rgba(5, 18, 46, 0.96)
        inset;

    transition:
        background-color 9999s ease-in-out 0s;
}


/* ---------------------------------------------------------
   8. 輸入框下面的小字
   --------------------------------------------------------- */

.entry-form-help {
    color: rgba(210, 221, 245, 0.62);
}


/* ---------------------------------------------------------
   9. 錯誤狀態
   保留紅色提醒，但改成適合深色背景
   --------------------------------------------------------- */

.entry-form-error {
    color: #ff9b9b !important;
}


.entry-form-input--error {
    border-color: #ff7b7b !important;

    background:
        rgba(83, 20, 31, 0.72);
}


.entry-form-input--error:focus {
    border-color: #ff9696 !important;

    box-shadow:
        0 0 0 3px
        rgba(255, 100, 100, 0.16);
}


/* ---------------------------------------------------------
   10. 開始測驗區
   --------------------------------------------------------- */

.entry-start-area p {
    color: rgba(255, 255, 255, 0.72);
}


#entry-start-button {
    border:
        1px solid rgba(139, 173, 255, 0.48);

    background:
        linear-gradient(
            135deg,
            #3159b5,
            #203f8c
        );

    color: #ffffff;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.22);

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}


#entry-start-button:not(:disabled):hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(171, 197, 255, 0.85);

    background:
        linear-gradient(
            135deg,
            #3b67cf,
            #294da2
        );

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.28),
        0 0 18px rgba(79, 126, 232, 0.18);
}


#entry-start-button:disabled {
    border-color:
        rgba(122, 143, 190, 0.20);

    background:
        rgba(43, 58, 91, 0.72);

    color:
        rgba(255, 255, 255, 0.42);

    opacity: 1;
}


/* ---------------------------------------------------------
   11. Placeholder
   --------------------------------------------------------- */

.entry-placeholder {
    border:
        1px dashed rgba(132, 166, 245, 0.36);

    background:
        rgba(7, 21, 52, 0.64);
}


.entry-placeholder p {
    color:
        rgba(255, 255, 255, 0.60);
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 650px) {

    .entry-card {
        border-radius: 16px;
    }


    .entry-info-item {
        padding: 16px;
    }


    .entry-form-input {
        min-height: 48px;

        font-size: 16px;
    }

}

/* =========================================================
   Step 38-3C-4
   Free Character Card
   免費專屬角色卡
   ========================================================= */


/* ---------------------------------------------------------
   1. Character Card 外框
   --------------------------------------------------------- */

.free-character-card {
    grid-column: 1 / -1;

    position: relative;
    overflow: hidden;

    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr);
    grid-template-areas:
        "visual header"
        "visual body";

    column-gap: 36px;
    row-gap: 12px;

    min-height: 420px;

    padding: 32px;

    border: 1px solid rgba(118, 156, 255, 0.32);
    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(11, 29, 70, 0.97),
            rgba(6, 18, 48, 0.95)
        );

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

    color: #ffffff;
}


/* 微弱宇宙光 */

.free-character-card::before {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    top: -150px;
    right: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(94, 132, 255, 0.18),
            transparent 68%
        );

    pointer-events: none;
}


/* ---------------------------------------------------------
   2. Header
   --------------------------------------------------------- */

.free-character-card__header {
    grid-area: header;

    position: relative;
    z-index: 1;

    align-self: end;
}


.free-character-card__eyebrow {
    display: inline-block;

    margin-bottom: 10px;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.16em;

    color: #9db9ff;
}


.free-character-card__title {
    margin: 0;

    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.25;

    color: #ffffff;
}


/* ---------------------------------------------------------
   3. 圖片區
   --------------------------------------------------------- */

.free-character-card__visual {
    grid-area: visual;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 350px;

    border: 1px solid rgba(135, 169, 255, 0.28);
    border-radius: 20px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(72, 112, 216, 0.30),
            rgba(9, 25, 61, 0.92) 62%
        );
}


/* 正式角色圖片 */

.free-character-card__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* 尚未有圖片時 */

.free-character-card__image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: calc(100% - 36px);
    min-height: 300px;

    border: 1px dashed rgba(164, 190, 255, 0.38);
    border-radius: 16px;

    color: rgba(206, 220, 255, 0.62);

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.14em;
}


/* ---------------------------------------------------------
   4. 角色文字
   --------------------------------------------------------- */

.free-character-card__body {
    grid-area: body;

    position: relative;
    z-index: 1;

    align-self: start;
}


.free-character-card__name {
    margin:
        0
        0
        14px;

    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.3;

    color: #ffffff;
}


.free-character-card__description {
    margin: 0;

    max-width: 620px;

    font-size: 15px;
    line-height: 1.85;

    color: rgba(255, 255, 255, 0.72);
}


/* ---------------------------------------------------------
   5. Pending 狀態
   --------------------------------------------------------- */

.free-character-card[data-status="content-pending"]
.free-character-card__name {
    color: rgba(255, 255, 255, 0.86);
}


.free-character-card[data-status="content-pending"]
.free-character-card__description {
    color: rgba(210, 221, 245, 0.64);
}


/* =========================================================
   Tablet / Mobile
   ========================================================= */

@media (max-width: 760px) {

    .free-character-card {
        grid-template-columns: 1fr;

        grid-template-areas:
            "header"
            "visual"
            "body";

        gap: 22px;

        min-height: 0;

        padding: 22px;

        border-radius: 20px;
    }


    .free-character-card__header {
        align-self: auto;
    }


    .free-character-card__visual {
        min-height: 360px;
    }


    .free-character-card__image-placeholder {
        min-height: 310px;
    }

}


@media (max-width: 480px) {

    .free-character-card {
        padding: 18px;

        border-radius: 18px;
    }


    .free-character-card__visual {
        min-height: 320px;

        border-radius: 16px;
    }


    .free-character-card__image-placeholder {
        min-height: 270px;
    }


    .free-character-card__description {
        font-size: 14px;
        line-height: 1.75;
    }

}

/* =========================================================
   Step 49
   Gateway / Login / My Reports
   ========================================================= */


/* =========================================================
   Entry Layout
   ========================================================= */

.entry-page {
    min-height: 100vh;

    padding:
        32px 24px
        90px;

    background:
        transparent;

    color:
        #ffffff;
}


.entry-page__container {
    width: 100%;

    max-width:
        1040px;

    margin:
        0 auto;
}


.entry-page__header {
    max-width:
        720px;

    margin:
        0 auto 42px;

    text-align:
        center;
}


.entry-page__eyebrow {
    display:
        inline-flex;

    margin:
        0 0 16px;

    padding:
        7px 13px;

    border:
        1px solid
        rgba(139, 173, 255, 0.34);

    border-radius:
        999px;

    background:
        rgba(8, 24, 61, 0.74);

    color:
        #bcd0ff;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.17em;

    backdrop-filter:
        blur(10px);
}


.entry-page__title {
    margin:
        0;

    font-size:
        clamp(
            36px,
            5vw,
            54px
        );

    line-height:
        1.15;

    color:
        #ffffff;

    text-shadow:
        0 8px 30px
        rgba(0, 0, 0, 0.32);
}


.entry-page__description {
    max-width:
        620px;

    margin:
        18px auto 0;

    color:
        rgba(
            231,
            238,
            255,
            0.78
        );

    font-size:
        16px;

    line-height:
        1.8;
}


/* =========================================================
   Gateway
   ========================================================= */

.gateway-panel {
    display:
        grid;

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

    gap:
        22px;
}


.gateway-panel[hidden] {
    display:
        none;
}


.gateway-card {
    position:
        relative;

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

    min-height:
        360px;

    padding:
        32px;

    border:
        1px solid
        rgba(
            127,
            160,
            245,
            0.26
        );

    border-radius:
        24px;

    background:
        linear-gradient(
            145deg,
            rgba(
                10,
                28,
                67,
                0.94
            ),
            rgba(
                5,
                17,
                44,
                0.91
            )
        );

    box-shadow:
        0 18px 48px
        rgba(
            0,
            0,
            0,
            0.27
        ),
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.05
        );

    backdrop-filter:
        blur(16px);
}


.gateway-card::before {
    content:
        "";

    position:
        absolute;

    width:
        230px;

    height:
        230px;

    top:
        -120px;

    right:
        -90px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                86,
                128,
                255,
                0.20
            ),
            transparent 70%
        );

    pointer-events:
        none;
}


.gateway-card--primary {
    border-color:
        rgba(
            139,
            173,
            255,
            0.42
        );
}


.gateway-card__eyebrow {
    position:
        relative;

    z-index:
        1;

    margin:
        0 0 15px;

    color:
        #9db9ff;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.15em;
}


.gateway-card__title {
    position:
        relative;

    z-index:
        1;

    margin:
        0;

    color:
        #ffffff;

    font-size:
        26px;

    line-height:
        1.35;
}


.gateway-card__description {
    position:
        relative;

    z-index:
        1;

    margin:
        18px 0 0;

    color:
        rgba(
            226,
            235,
            255,
            0.74
        );

    font-size:
        15px;

    line-height:
        1.8;
}


.gateway-card__meta {
    position:
        relative;

    z-index:
        1;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin:
        22px 0 28px;
}


.gateway-card__meta span {
    padding:
        7px 10px;

    border:
        1px solid
        rgba(
            132,
            166,
            255,
            0.22
        );

    border-radius:
        999px;

    background:
        rgba(
            29,
            58,
            116,
            0.42
        );

    color:
        rgba(
            231,
            238,
            255,
            0.82
        );

    font-size:
        12px;
}


/* =========================================================
   Buttons
   ========================================================= */

.gateway-button {
    min-height:
        50px;

    padding:
        13px 20px;

    border-radius:
        13px;

    font-size:
        14px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}


.gateway-card
.gateway-button {
    width:
        100%;

    margin-top:
        auto;
}


.gateway-button--primary {
    border:
        1px solid
        rgba(
            151,
            182,
            255,
            0.52
        );

    background:
        linear-gradient(
            135deg,
            #3965ca,
            #244694
        );

    color:
        #ffffff;

    box-shadow:
        0 10px 24px
        rgba(
            0,
            0,
            0,
            0.20
        );
}


.gateway-button--primary:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(
            184,
            205,
            255,
            0.86
        );

    background:
        linear-gradient(
            135deg,
            #4776dc,
            #2c54aa
        );

    box-shadow:
        0 14px 30px
        rgba(
            0,
            0,
            0,
            0.26
        );
}


.gateway-button--secondary {
    border:
        1px solid
        rgba(
            139,
            173,
            255,
            0.32
        );

    background:
        rgba(
            17,
            40,
            88,
            0.70
        );

    color:
        #dce7ff;
}


.gateway-button--secondary:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(
            164,
            191,
            255,
            0.65
        );

    background:
        rgba(
            30,
            60,
            122,
            0.82
        );
}


.gateway-button:disabled {
    opacity:
        0.55;

    cursor:
        wait;

    transform:
        none;
}


/* =========================================================
   Account Panels
   ========================================================= */

.account-panel {
    width:
        100%;

    max-width:
        760px;

    margin:
        0 auto;
}


.account-panel[hidden] {
    display:
        none;
}


.account-back-button {
    margin:
        0 0 16px;

    padding:
        8px 0;

    border:
        0;

    background:
        transparent;

    color:
        rgba(
            220,
            231,
            255,
            0.72
        );

    font-size:
        14px;

    cursor:
        pointer;
}


.account-back-button:hover {
    color:
        #ffffff;
}


.account-card {
    padding:
        36px;

    border:
        1px solid
        rgba(
            127,
            160,
            245,
            0.28
        );

    border-radius:
        24px;

    background:
        linear-gradient(
            145deg,
            rgba(
                10,
                28,
                67,
                0.96
            ),
            rgba(
                5,
                17,
                44,
                0.94
            )
        );

    box-shadow:
        0 18px 48px
        rgba(
            0,
            0,
            0,
            0.28
        );

    backdrop-filter:
        blur(16px);
}


.account-card__eyebrow {
    margin:
        0 0 12px;

    color:
        #9db9ff;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.16em;
}


.account-card__title {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        28px;

    line-height:
        1.35;
}


.account-card__description {
    margin:
        14px 0 26px;

    color:
        rgba(
            226,
            235,
            255,
            0.72
        );

    font-size:
        14px;

    line-height:
        1.8;
}


/* =========================================================
   Login Form
   ========================================================= */

.account-form {
    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;
}


.account-form[hidden] {
    display:
        none;
}


.account-form__label {
    color:
        rgba(
            239,
            244,
            255,
            0.90
        );

    font-size:
        13px;

    font-weight:
        700;
}


.account-form__input {
    width:
        100%;

    min-height:
        52px;

    padding:
        13px 15px;

    border:
        1px solid
        rgba(
            131,
            163,
            239,
            0.32
        );

    border-radius:
        13px;

    outline:
        none;

    background:
        rgba(
            4,
            15,
            39,
            0.80
        );

    color:
        #ffffff;

    font-size:
        16px;

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


.account-form__input::placeholder {
    color:
        rgba(
            218,
            227,
            247,
            0.36
        );
}


.account-form__input:focus {
    border-color:
        rgba(
            151,
            182,
            255,
            0.78
        );

    box-shadow:
        0 0 0 3px
        rgba(
            76,
            118,
            224,
            0.15
        );
}


.account-form__input--code {
    max-width:
        240px;

    font-size:
        22px;

    font-weight:
        700;

    letter-spacing:
        0.20em;

    text-align:
        center;
}


.account-form__hint {
    margin:
        0 0 8px;

    color:
        rgba(
            222,
            232,
            255,
            0.72
        );

    font-size:
        14px;

    line-height:
        1.7;
}


.account-form__hint strong {
    color:
        #ffffff;
}


.account-form__error {
    margin:
        0;

    color:
        #ffaaaa;

    font-size:
        13px;

    line-height:
        1.6;
}


.account-form__error[hidden] {
    display:
        none;
}


.account-text-button {
    align-self:
        flex-start;

    padding:
        5px 0;

    border:
        0;

    background:
        transparent;

    color:
        #a9c2ff;

    font-size:
        13px;

    cursor:
        pointer;
}


.account-text-button:hover {
    color:
        #ffffff;
}


/* =========================================================
   My Reports
   ========================================================= */

.reports-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        24px;
}


.reports-header__email {
    margin:
        8px 0 0;

    color:
        rgba(
            222,
            232,
            255,
            0.64
        );

    font-size:
        13px;
}


.reports-actions {
    display:
        flex;

    justify-content:
        flex-start;

    margin-bottom:
        20px;
}


.reports-message {
    padding:
        24px;

    border:
        1px solid
        rgba(
            127,
            160,
            245,
            0.24
        );

    border-radius:
        16px;

    background:
        rgba(
            8,
            25,
            60,
            0.76
        );

    color:
        rgba(
            231,
            238,
            255,
            0.72
        );

    text-align:
        center;
}


.reports-message[hidden] {
    display:
        none;
}


.reports-message--error {
    border-color:
        rgba(
            255,
            125,
            125,
            0.28
        );

    color:
        #ffb4b4;
}


.reports-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;
}


.history-report-card {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    padding:
        22px;

    border:
        1px solid
        rgba(
            127,
            160,
            245,
            0.25
        );

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            rgba(
                10,
                29,
                70,
                0.94
            ),
            rgba(
                6,
                19,
                49,
                0.92
            )
        );

    box-shadow:
        0 10px 28px
        rgba(
            0,
            0,
            0,
            0.20
        );
}


.history-report-card__main {
    min-width:
        0;

    flex:
        1;
}


.history-report-card__top {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        10px;
}


.history-report-card__date {
    color:
        rgba(
            221,
            231,
            255,
            0.60
        );

    font-size:
        12px;
}


.history-report-card__status {
    padding:
        5px 8px;

    border-radius:
        999px;

    font-size:
        10px;

    font-weight:
        800;
}


.history-report-card__status--free {
    background:
        rgba(
            111,
            139,
            200,
            0.18
        );

    color:
        #c6d6fa;
}


.history-report-card__status--paid {
    background:
        rgba(
            98,
            159,
            255,
            0.22
        );

    color:
        #bcd5ff;
}


.history-report-card__title {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        18px;
}


.history-report-card__id {
    margin:
        8px 0 0;

    color:
        rgba(
            219,
            229,
            250,
            0.48
        );

    font-size:
        11px;

    overflow-wrap:
        anywhere;
}


.history-report-card__actions {
    flex:
        0 0 auto;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        8px;
}


.history-report-card__button {
    min-width:
        110px;

    padding:
        10px 14px;

    border:
        1px solid
        rgba(
            151,
            182,
            255,
            0.42
        );

    border-radius:
        11px;

    background:
        rgba(
            41,
            77,
            157,
            0.76
        );

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        700;

    cursor:
        pointer;
}


.history-report-card__button:hover {
    background:
        rgba(
            55,
            96,
            192,
            0.92
        );
}


.history-report-card__upgrade {
    color:
        rgba(
            204,
            218,
            249,
            0.50
        );

    font-size:
        10px;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (
    max-width: 800px
) {

    .gateway-panel {
        grid-template-columns:
            1fr;
    }


    .gateway-card {
        min-height:
            310px;
    }

}


/* =========================================================
   Mobile
   ========================================================= */

@media (
    max-width: 600px
) {

    .entry-page {
        padding:
            38px 14px
            64px;
    }


    .entry-page__header {
        margin-bottom:
            30px;
    }


    .entry-page__title {
        font-size:
            34px;
    }


    .entry-page__description {
        font-size:
            14px;
    }


    .gateway-panel {
        gap:
            14px;
    }


    .gateway-card {
        min-height:
            auto;

        padding:
            24px 20px;

        border-radius:
            19px;
    }


    .gateway-card__title {
        font-size:
            22px;
    }


    .gateway-card
    .gateway-button {
        margin-top:
            26px;
    }


    .account-card {
        padding:
            26px 20px;

        border-radius:
            19px;
    }


    .account-card__title {
        font-size:
            24px;
    }


    .account-form__input--code {
        max-width:
            none;
    }


    .reports-header {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .reports-header
    #logout-button {
        width:
            100%;
    }


    .reports-actions
    .gateway-button {
        width:
            100%;
    }


    .history-report-card {
        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            18px;
    }


    .history-report-card__actions {
        align-items:
            stretch;
    }


    .history-report-card__button {
        width:
            100%;
    }

}

/* =========================================================
   Step 49
   Result → Save Report
   ========================================================= */

.result-save-report {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 28px;

    margin:
        28px 0;

    padding:
        28px 30px;

    border:
        1px solid
        rgba(126, 161, 246, 0.34);

    border-radius:
        20px;

    background:
        linear-gradient(
            135deg,
            rgba(10, 29, 70, 0.96),
            rgba(6, 19, 49, 0.94)
        );

    box-shadow:
        0 16px 38px
        rgba(0, 0, 0, 0.22);
}


.result-save-report__content {
    display: flex;

    align-items: flex-start;

    gap: 18px;

    min-width: 0;
}


.result-save-report__icon {
    display: flex;

    align-items: center;

    justify-content: center;

    flex:
        0 0 42px;

    width:
        42px;

    height:
        42px;

    border:
        1px solid
        rgba(149, 181, 255, 0.40);

    border-radius:
        50%;

    background:
        rgba(61, 101, 194, 0.26);

    color:
        #c8d8ff;

    font-size:
        18px;

    font-weight:
        800;
}


.result-save-report__text {
    min-width: 0;
}


.result-save-report__eyebrow {
    margin:
        0 0 7px;

    color:
        #9db9ff;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.15em;
}


.result-save-report__title {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        21px;

    line-height:
        1.4;
}


.result-save-report__description {
    max-width:
        580px;

    margin:
        9px 0 0;

    color:
        rgba(224, 233, 255, 0.68);

    font-size:
        13px;

    line-height:
        1.75;
}


.result-save-report__actions {
    display: flex;

    flex:
        0 0 auto;

    flex-direction:
        column;

    gap:
        9px;

    min-width:
        190px;
}


.result-save-report__button,
.result-save-report__secondary {
    min-height:
        46px;

    padding:
        11px 16px;

    border-radius:
        12px;

    font-size:
        13px;

    font-weight:
        700;

    cursor:
        pointer;
}


.result-save-report__button {
    border:
        1px solid
        rgba(151, 182, 255, 0.55);

    background:
        linear-gradient(
            135deg,
            #3965ca,
            #244694
        );

    color:
        #ffffff;
}


.result-save-report__secondary {
    border:
        1px solid
        rgba(139, 173, 255, 0.30);

    background:
        rgba(17, 40, 88, 0.72);

    color:
        #dce7ff;
}


.result-save-report__button:hover,
.result-save-report__secondary:hover {
    transform:
        translateY(-1px);
}


.result-save-report--saved {
    border-color:
        rgba(139, 185, 255, 0.48);
}


.result-save-report--saved
.result-save-report__icon {
    background:
        rgba(68, 125, 203, 0.30);

    color:
        #ffffff;
}


.result-save-report [hidden] {
    display:
        none;
}


@media (
    max-width: 700px
) {

    .result-save-report {
        align-items:
            stretch;

        flex-direction:
            column;

        padding:
            22px 18px;
    }


    .result-save-report__actions {
        width:
            100%;

        min-width:
            0;
    }


    .result-save-report__button,
    .result-save-report__secondary {
        width:
            100%;
    }

}