* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f7f9f8;
    color: #16382f;
}

.navbar {
    height: 80px;
    padding: 0 7%;

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

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

    position: sticky;
    top: 0;
    z-index: 100;

    border-bottom: 1px solid #e4ebe8;
}

.logo {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 1px;
}

.logo span {
    color: #d7a928;
}

nav {
    display: flex;
    gap: 35px;
}

nav a {
    text-decoration: none;
    color: #52635e;
    font-size: 14px;
    font-weight: 600;
    transition: 0.3s;
}

nav a:hover {
    color: #173c32;
}

button {
    border: none;
    cursor: pointer;
    font-weight: 600;
}

.btn-nav {
    padding: 11px 22px;
    border-radius: 7px;

    background: #173c32;
    color: white;
}

.hero {
    min-height: calc(100vh - 80px);

    padding: 70px 7%;

    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 60px;

    background:
        radial-gradient(circle at 85% 30%, #dcebe5 0%, transparent 35%),
        #f7f9f8;
}

.badge {
    display: inline-block;

    padding: 8px 14px;

    background: #e2eee9;
    color: #24614f;

    border-radius: 50px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;

    margin-bottom: 25px;
}

.hero h1 {
    font-size: clamp(45px, 5vw, 75px);
    line-height: 1.05;

    max-width: 700px;
}

.hero h1 span {
    display: block;
    color: #c99b1f;
}

.hero-description {
    max-width: 620px;

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

    color: #65736f;

    margin-top: 28px;
}

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-top: 35px;
}

.btn-primary {
    padding: 16px 28px;

    border-radius: 8px;

    background: #173c32;
    color: white;

    font-size: 15px;

    transition: 0.3s;
}

.btn-primary:hover {
    transform: translateY(-3px);
    background: #245c4d;
}

.btn-secondary {
    padding: 15px 25px;

    border: 1px solid #ccd9d4;
    border-radius: 8px;

    text-decoration: none;
    color: #173c32;

    font-weight: 600;
    font-size: 15px;
}

.hero-info {
    display: flex;
    gap: 50px;

    margin-top: 55px;
}

.hero-info div {
    display: flex;
    flex-direction: column;
}

.hero-info strong {
    font-size: 28px;
    color: #173c32;
}

.hero-info span {
    margin-top: 5px;

    font-size: 12px;
    color: #7b8884;
}

.hero-visual {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

    transform: rotate(2deg);
}

.character-card {
    min-height: 210px;

    padding: 30px;

    border-radius: 20px;

    background: white;

    box-shadow: 0 20px 50px rgba(20, 59, 48, 0.09);

    transition: 0.35s;
}

.character-card:nth-child(2),
.character-card:nth-child(4) {
    transform: translateY(40px);
}

.character-card:hover {
    transform: translateY(-10px) scale(1.02);
}

.character-card:nth-child(2):hover,
.character-card:nth-child(4):hover {
    transform: translateY(30px) scale(1.02);
}

.animal {
    font-size: 55px;
    margin-bottom: 25px;
}

.character-card h3 {
    font-size: 20px;
    margin-bottom: 8px;
}

.character-card p {
    font-size: 13px;
    color: #7b8884;
}

.about {
    padding: 120px 7% 70px;
    text-align: center;

    background: white;
}

.section-label {
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 700;

    color: #b88b17;

    margin-bottom: 20px;
}

.about h2 {
    max-width: 800px;
    margin: auto;

    font-size: 45px;
    line-height: 1.2;
}

.about h2 span {
    color: #c99b1f;
}

.about p {
    max-width: 700px;

    margin: 25px auto 0;

    color: #73817d;
    line-height: 1.8;
}

.characters {
    padding: 50px 7% 120px;

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

    gap: 25px;

    background: white;
}

.character-item {
    padding: 35px;

    border: 1px solid #e1e8e5;
    border-radius: 15px;

    transition: 0.3s;
}

.character-item:hover {
    transform: translateY(-8px);

    border-color: #c99b1f;

    box-shadow: 0 20px 40px rgba(20, 59, 48, 0.08);
}

.character-icon {
    font-size: 45px;
    margin-bottom: 25px;
}

.character-item h3 {
    margin-bottom: 15px;
}

.character-item p {
    color: #75827e;

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

.assessment {
    padding: 100px 7%;

    background: #173c32;
}

.assessment-content {
    max-width: 700px;
    margin: auto;

    text-align: center;
}

.assessment-content span {
    color: #d9ae39;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.assessment h2 {
    color: white;

    font-size: 45px;

    margin-top: 20px;
}

.assessment p {
    color: #adc1ba;

    line-height: 1.8;

    margin: 25px 0 35px;
}

.assessment button {
    padding: 16px 30px;

    border-radius: 8px;

    background: #d1a32a;
    color: #173c32;

    font-size: 15px;
}

footer {
    padding: 50px 7%;

    text-align: center;

    background: #102b24;
    color: white;
}

.footer-logo {
    font-weight: 800;
    letter-spacing: 1px;
}

footer p {
    color: #91aaa2;

    margin: 12px 0 25px;

    font-size: 13px;
}

footer span {
    color: #688078;

    font-size: 11px;
}

@media (max-width: 900px) {

    nav {
        display: none;
    }

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

    .hero-visual {
        margin-top: 30px;
    }

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

}

@media (max-width: 550px) {

    .navbar {
        padding: 0 5%;
    }

    .btn-nav {
        padding: 9px 14px;
        font-size: 12px;
    }

    .hero {
        padding: 60px 5%;
    }

    .hero h1 {
        font-size: 42px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-info {
        gap: 25px;
    }

    .hero-visual {
        grid-template-columns: 1fr;
        transform: none;
    }

    .character-card:nth-child(2),
    .character-card:nth-child(4) {
        transform: none;
    }

    .characters {
        grid-template-columns: 1fr;
        padding-left: 5%;
        padding-right: 5%;
    }

    .about h2,
    .assessment h2 {
        font-size: 34px;
    }

}

/* =========================================
   ASSESSMENT FORM PAGE
========================================= */

.assessment-page {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 10% 20%,
            #e4efeb 0%,
            transparent 30%
        ),
        #f7f9f8;
}

.simple-navbar {
    height: 75px;

    padding: 0 7%;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;

    background: white;

    border-bottom: 1px solid #e4ebe8;
}

.simple-navbar .logo {
    text-align: center;
}

.back-link {
    color: #65736f;

    text-decoration: none;

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

.back-link:hover {
    color: #173c32;
}

.form-wrapper {
    min-height: calc(100vh - 75px);

    padding: 60px 20px;

    display: flex;
    justify-content: center;
}

.form-container {
    width: 100%;
    max-width: 620px;
}

.form-progress {
    margin-bottom: 55px;
}

.progress-info {
    display: flex;
    justify-content: space-between;

    margin-bottom: 12px;

    color: #71807b;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.progress-bar {
    width: 100%;
    height: 5px;

    background: #dfe8e4;

    border-radius: 50px;

    overflow: hidden;
}

.progress-fill {
    height: 100%;

    background: #c99b1f;

    border-radius: 50px;
}

.progress-33 {
    width: 33%;
}

.form-heading {
    margin-bottom: 40px;
}

.form-label {
    color: #b88b17;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.form-heading h1 {
    margin-top: 15px;

    font-size: 45px;

    color: #173c32;
}

.form-heading p {
    margin-top: 15px;

    color: #73817d;

    line-height: 1.7;
}

.participant-form {
    padding: 40px;

    background: white;

    border: 1px solid #e1e8e5;
    border-radius: 16px;

    box-shadow: 0 20px 50px rgba(20, 59, 48, 0.06);
}

.input-group {
    margin-bottom: 25px;
}

.input-group label {
    display: block;

    margin-bottom: 10px;

    color: #294b41;

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

.input-group label span {
    margin-left: 5px;

    color: #9aa7a3;

    font-size: 11px;
    font-weight: 400;
}

.input-group input,
.input-group select {
    width: 100%;

    padding: 15px 16px;

    border: 1px solid #d9e3df;
    border-radius: 8px;

    background: #fbfcfc;

    color: #173c32;

    font-size: 14px;

    outline: none;

    transition: 0.25s;
}

.input-group input:focus,
.input-group select:focus {
    border-color: #b88b17;

    background: white;

    box-shadow: 0 0 0 3px rgba(201, 155, 31, 0.1);
}

.form-button {
    width: 100%;

    padding: 16px;

    margin-top: 10px;

    border-radius: 8px;

    background: #173c32;

    color: white;

    font-size: 14px;

    transition: 0.3s;
}

.form-button:hover {
    background: #245c4d;

    transform: translateY(-2px);
}

.privacy-info {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-top: 25px;
}

.privacy-info p {
    color: #8a9894;

    font-size: 11px;

    line-height: 1.5;
}


@media (max-width: 550px) {

    .simple-navbar {
        padding: 0 5%;

        grid-template-columns: 0.7fr 1.6fr 0.7fr;
    }

    .simple-navbar .logo {
        font-size: 15px;
    }

    .back-link {
        font-size: 11px;
    }

    .form-wrapper {
        padding: 40px 20px;
    }

    .form-heading h1 {
        font-size: 35px;
    }

    .participant-form {
        padding: 25px;
    }

}

/* =========================================
   FREE ASSESSMENT QUIZ
========================================= */

.quiz-wrapper {
    min-height: calc(100vh - 75px);

    padding: 55px 20px 80px;

    display: flex;
    justify-content: center;
}

.quiz-container {
    width: 100%;
    max-width: 800px;
}

.quiz-heading {
    margin-bottom: 30px;
}

.quiz-heading h1 {
    margin-top: 12px;

    font-size: 38px;

    color: #173c32;
}

.question-card {
    padding: 45px;

    background: white;

    border: 1px solid #e1e8e5;
    border-radius: 18px;

    box-shadow:
        0 20px 50px
        rgba(20, 59, 48, 0.06);
}

.question-card h2 {
    max-width: 700px;

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

    color: #173c32;

    margin-bottom: 35px;
}

.answer-container {
    display: flex;
    flex-direction: column;

    gap: 15px;
}

.answer-option {
    width: 100%;

    padding: 20px;

    display: grid;

    grid-template-columns:
        45px 1fr 30px;

    align-items: center;

    gap: 15px;

    text-align: left;

    background: #fbfcfc;

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

    color: #52635e;

    transition: 0.25s;
}

.answer-option:hover {
    border-color: #c99b1f;

    background: #fffdf7;

    transform: translateY(-2px);
}

.answer-letter {
    width: 38px;
    height: 38px;

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

    border-radius: 50%;

    background: #edf2f0;

    color: #173c32;

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

.answer-text {
    font-size: 14px;
    line-height: 1.6;
}

.answer-check {
    opacity: 0;

    color: #c99b1f;

    font-size: 18px;
}

.answer-option.selected {
    border-color: #c99b1f;

    background: #fffaf0;
}

.answer-option.selected
.answer-letter {
    background: #c99b1f;

    color: white;
}

.answer-option.selected
.answer-check {
    opacity: 1;
}

.quiz-navigation {
    margin-top: 40px;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-previous,
.btn-next {
    padding: 14px 25px;

    border-radius: 8px;

    font-size: 13px;
}

.btn-previous {
    background: transparent;

    color: #65736f;

    border: 1px solid #dce5e1;
}

.btn-next {
    background: #173c32;

    color: white;
}

.btn-next:hover {
    background: #245c4d;
}

.quiz-note {
    margin-top: 25px;

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

    gap: 10px;
}

.quiz-note p {
    color: #899792;

    font-size: 11px;
}


@media (max-width: 550px) {

    .quiz-wrapper {
        padding:
            40px 18px
            70px;
    }

    .quiz-heading h1 {
        font-size: 30px;
    }

    .question-card {
        padding: 25px;
    }

    .question-card h2 {
        font-size: 20px;
    }

    .answer-option {
        grid-template-columns:
            38px 1fr 20px;

        padding: 16px;

        gap: 10px;
    }

    .answer-letter {
        width: 34px;
        height: 34px;
    }

    .answer-text {
        font-size: 12px;
    }

}

/* =========================================
   HASIL ASSESSMENT GRATIS
========================================= */

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

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(219, 235, 228, 0.9) 0%,
            transparent 30%
        ),
        #f7f9f8;

    color: #173c32;
}


.result-wrapper {
    padding: 70px 20px 100px;
}


.result-container {
    width: 100%;
    max-width: 1150px;

    margin: 0 auto;
}


/* =========================================
   RESULT INTRO
========================================= */

.result-intro {
    max-width: 760px;

    margin: 0 auto 55px;

    text-align: center;
}


.result-label {
    color: #b88b17;

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

    letter-spacing: 2px;
}


.result-intro > p {
    margin-top: 18px;

    color: #71807b;

    font-size: 14px;
}


.result-intro h1 {
    margin-top: 10px;

    color: #173c32;

    font-size: 48px;
    line-height: 1.15;
}


.result-intro .result-warning {
    max-width: 570px;

    margin: 18px auto 0;

    color: #85928e;

    font-size: 13px;
    line-height: 1.7;
}


/* =========================================
   CHARACTER RESULT CARD
========================================= */

.result-character-card {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    background: #ffffff;

    border: 1px solid #e2e9e6;
    border-radius: 24px;

    overflow: hidden;

    box-shadow:
        0 30px 80px
        rgba(20, 59, 48, 0.1);

    animation:
        resultReveal
        0.8s ease;
}


@keyframes resultReveal {

    from {
        opacity: 0;

        transform:
            translateY(30px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =========================================
   CHARACTER IMAGE
========================================= */

.result-image-wrapper {
    position: relative;

    min-height: 760px;

    overflow: hidden;

    background: #e8efec;
}


.result-image-wrapper::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(10, 39, 31, 0.15),
            transparent 40%
        );

    pointer-events: none;
}


.result-image-wrapper img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition:
        transform 0.8s ease;
}


.result-character-card:hover
.result-image-wrapper img {

    transform:
        scale(1.035);

}


/* =========================================
   CHARACTER CONTENT
========================================= */

.result-character-content {
    padding: 65px 55px;

    display: flex;
    flex-direction: column;

    justify-content: center;
}


.character-type {
    color: #b88b17;

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

    letter-spacing: 2px;
}


.result-character-content h2 {
    margin-top: 16px;

    color: #173c32;

    font-size: 48px;
    line-height: 1.1;
}


.combination-badge {
    width: fit-content;

    margin-top: 18px;

    padding: 9px 16px;

    background: #e9f1ee;

    border: 1px solid #dce8e3;
    border-radius: 50px;

    color: #315e50;

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


/* =========================================
   DORONGAN UTAMA
========================================= */

.character-desire {
    margin-top: 32px;

    padding: 5px 0 5px 20px;

    border-left:
        3px solid #c99b1f;
}


.character-desire span {
    display: block;

    color: #8a9894;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.character-desire p {
    margin-top: 8px;

    color: #173c32;

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

    line-height: 1.5;
}


/* =========================================
   FOKUS KARAKTER
========================================= */

.character-focus {
    margin-top: 30px;
}


.character-focus span {
    display: block;

    color: #8a9894;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.character-focus h3 {
    margin-top: 9px;

    color: #c29418;

    font-size: 27px;
    font-weight: 900;

    line-height: 1.3;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}


/* =========================================
   CHARACTER DIMENSION
========================================= */

.dimension-wrapper {
    display: grid;

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

    gap: 15px;

    margin-top: 35px;
}


.dimension-item {
    min-width: 0;

    padding: 20px;

    background: #ffffff;

    border:
        1px solid #e0e8e5;

    border-radius: 12px;

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


.dimension-item:hover {
    transform:
        translateY(-3px);

    border-color:
        #c99b1f;

    box-shadow:
        0 12px 25px
        rgba(20, 59, 48, 0.07);
}


.dimension-item span {
    display: block;

    color: #899792;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1px;
}


.dimension-item strong {
    display: block;

    margin-top: 9px;

    color: #173c32;

    font-size: 18px;
}


.dimension-item small {
    display: block;

    margin-top: 6px;

    color: #899792;

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


/* =========================================
   CHARACTER TENDENCY
========================================= */

.character-tendency {
    margin-top: 18px;

    padding: 22px;

    background: #f4f8f6;

    border:
        1px solid #e2ebe7;

    border-radius: 12px;
}


.tendency-label {
    display: block;

    color: #899792;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.3px;
}


.character-tendency p {
    margin-top: 10px;

    color: #60716b;

    font-size: 13px;
    line-height: 1.6;
}


.character-tendency strong {
    display: block;

    margin-top: 7px;

    color: #173c32;

    font-size: 18px;
}


/* =========================================
   LOCKED CHARACTER ANALYSIS
========================================= */

.locked-result {
    position: relative;

    margin-top: 20px;

    padding: 24px;

    background: #fafcfb;

    border:
        1px solid #dce5e1;

    border-radius: 14px;

    overflow: hidden;
}


.locked-header {
    display: flex;

    align-items: center;

    gap: 15px;
}


.lock-icon {
    width: 46px;
    height: 46px;

    flex-shrink: 0;

    display: flex;

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

    background: #e7efec;

    border-radius: 50%;

    font-size: 18px;
}


.locked-label {
    display: block;

    color: #b88b17;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.locked-header h3 {
    margin-top: 5px;

    color: #173c32;

    font-size: 17px;
    line-height: 1.4;
}


.locked-content {
    display: grid;

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

    gap: 14px;

    margin-top: 24px;

    filter:
        blur(5px);

    opacity: 0.55;

    user-select: none;

    pointer-events: none;
}


.locked-item {
    min-width: 0;

    padding: 18px;

    background: #ffffff;

    border:
        1px solid #e3eae7;

    border-radius: 9px;
}


.locked-item span {
    display: block;

    color: #8b9894;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1px;

    line-height: 1.5;
}


.locked-item strong {
    display: block;

    margin-top: 8px;

    color: #173c32;

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


.locked-overlay {
    position: absolute;

    left: 50%;
    bottom: 24px;

    width: 260px;

    transform:
        translateX(-50%);

    padding: 12px 15px;

    display: flex;

    flex-direction: column;

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

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

    border:
        1px solid #e1e8e5;

    border-radius: 10px;

    box-shadow:
        0 10px 30px
        rgba(20, 59, 48, 0.1);

    text-align: center;

    pointer-events: none;
}


.locked-overlay span {
    font-size: 19px;
}


.locked-overlay p {
    margin-top: 6px;

    color: #173c32;

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

    line-height: 1.5;
}


/* =========================================
   FULL ASSESSMENT CTA
========================================= */

.full-assessment-cta {
    position: relative;

    margin-top: 60px;

    padding: 65px;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(65, 111, 96, 0.5),
            transparent 35%
        ),
        #173c32;

    border-radius: 22px;

    overflow: hidden;

    color: #ffffff;
}


.full-assessment-cta::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -100px;
    bottom: -150px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 50%;

    pointer-events: none;
}


.cta-text {
    position: relative;

    z-index: 2;

    max-width: 720px;
}


.cta-text > span {
    color: #d4aa37;

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

    letter-spacing: 2px;
}


.cta-text h2 {
    margin-top: 18px;

    color: #ffffff;

    font-size: 42px;
    line-height: 1.2;
}


.cta-text p {
    margin-top: 20px;

    max-width: 650px;

    color: #aec0ba;

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


.cta-benefits {
    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 16px 40px;

    margin-top: 40px;

    color: #dce7e3;

    font-size: 13px;
}


.cta-benefits div {
    display: flex;

    align-items: center;

    gap: 12px;

    line-height: 1.5;
}


.cta-benefits span {
    width: 25px;
    height: 25px;

    flex-shrink: 0;

    display: flex;

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

    background:
        rgba(212, 170, 55, 0.12);

    border-radius: 50%;

    color: #d4aa37;

    font-weight: 800;
}


.full-assessment-cta button {
    position: relative;

    z-index: 2;

    margin-top: 42px;

    padding: 17px 30px;

    background: #d1a32a;

    border: none;
    border-radius: 8px;

    color: #173c32;

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


.full-assessment-cta button:hover {
    transform:
        translateY(-3px);

    background: #ddb43e;

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.15);
}


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

@media (max-width: 900px) {

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


    .result-image-wrapper {
        min-height: 600px;
        height: 600px;
    }


    .result-character-content {
        padding: 55px 45px;
    }

}


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

@media (max-width: 600px) {

    .result-wrapper {
        padding:
            45px 15px
            80px;
    }


    .result-intro {
        margin-bottom: 40px;
    }


    .result-intro h1 {
        font-size: 35px;
    }


    .result-image-wrapper {
        min-height: 430px;
        height: 430px;
    }


    .result-character-content {
        padding: 38px 25px;
    }


    .result-character-content h2 {
        font-size: 38px;
    }


    .character-desire p {
        font-size: 18px;
    }


    .character-focus h3 {
        font-size: 23px;
    }


    .dimension-wrapper {
        grid-template-columns: 1fr;
    }


    .locked-content {
        grid-template-columns: 1fr;
    }


    .locked-overlay {
        bottom: 45px;

        width:
            calc(100% - 50px);
    }


    .full-assessment-cta {
        padding: 45px 28px;
    }


    .cta-text h2 {
        font-size: 32px;
    }


    .cta-benefits {
        grid-template-columns: 1fr;
    }


    .full-assessment-cta button {
        width: 100%;
    }

}


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

@media (max-width: 400px) {

    .result-image-wrapper {
        min-height: 380px;
        height: 380px;
    }


    .result-character-content {
        padding: 32px 20px;
    }


    .result-character-content h2 {
        font-size: 33px;
    }


    .combination-badge {
        font-size: 10px;
    }


    .full-assessment-cta {
        padding: 38px 22px;
    }


    .cta-text h2 {
        font-size: 28px;
    }

}

/* =========================================
   CONTINUE ASSESSMENT PAGE
========================================= */

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

    background:
        radial-gradient(
            circle at 85% 8%,
            rgba(218, 234, 227, 0.9) 0%,
            transparent 28%
        ),
        #f7f9f8;

    color: #173c32;
}


.continue-wrapper {
    padding: 80px 20px 100px;
}


.continue-container {
    width: 100%;
    max-width: 1150px;

    margin: 0 auto;
}


/* =========================================
   CONTINUE HERO
========================================= */

.continue-hero {
    max-width: 850px;

    margin: 0 auto 65px;

    text-align: center;
}


.continue-label {
    color: #b88b17;

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

    letter-spacing: 2px;
}


.continue-hero h1 {
    margin-top: 20px;

    color: #173c32;

    font-size: 58px;
    line-height: 1.08;
}


.continue-hero h1 span {
    display: block;

    color: #c99b1f;
}


.continue-hero p {
    max-width: 650px;

    margin: 25px auto 0;

    color: #71807b;

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


/* =========================================
   PACKAGE COMPARISON
========================================= */

.assessment-comparison {
    display: grid;

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

    gap: 30px;

    align-items: stretch;
}


.package-card {
    position: relative;

    padding: 45px;

    border-radius: 20px;
}


.free-package {
    background: #ffffff;

    border: 1px solid #dfe8e4;

    box-shadow:
        0 20px 50px
        rgba(20, 59, 48, 0.06);
}


.premium-package {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(72, 122, 105, 0.45),
            transparent 35%
        ),
        #173c32;

    color: #ffffff;

    box-shadow:
        0 30px 70px
        rgba(20, 59, 48, 0.18);
}


.recommended-badge {
    position: absolute;

    top: 0;
    right: 35px;

    padding: 10px 17px;

    background: #d1a32a;

    border-radius:
        0 0 8px 8px;

    color: #173c32;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1.3px;
}


.package-type {
    color: #b88b17;

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

    letter-spacing: 1.7px;
}


.premium-package .package-type {
    color: #d4aa37;
}


.package-header h2 {
    margin-top: 14px;

    color: #173c32;

    font-size: 42px;
}


.premium-package
.package-header h2 {

    color: #ffffff;
}


.package-header p {
    margin-top: 14px;

    max-width: 430px;

    color: #7a8984;

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


.premium-package
.package-header p {

    color: #aec0ba;
}


.package-question {
    display: flex;

    align-items: flex-end;

    gap: 10px;

    margin-top: 35px;

    padding-bottom: 30px;

    border-bottom:
        1px solid #e2e9e6;
}


.premium-package
.package-question {

    border-color:
        rgba(255, 255, 255, 0.12);
}


.package-question strong {
    color: #173c32;

    font-size: 55px;
    line-height: 0.9;
}


.premium-package
.package-question strong {

    color: #d4aa37;
}


.package-question span {
    color: #84928d;

    font-size: 13px;
}


.premium-package
.package-question span {

    color: #aec0ba;
}


.package-features {
    display: flex;

    flex-direction: column;

    gap: 17px;

    margin-top: 30px;
}


.package-features div {
    display: flex;

    align-items: center;

    gap: 12px;

    color: #53645e;

    font-size: 13px;
}


.premium-package
.package-features div {

    color: #dce7e3;
}


.package-features div span {
    width: 25px;
    height: 25px;

    flex-shrink: 0;

    display: flex;

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

    background: #e9f1ee;

    border-radius: 50%;

    color: #2f6856;

    font-weight: 800;
}


.premium-package
.package-features div span {

    background:
        rgba(212, 170, 55, 0.12);

    color: #d4aa37;
}


.package-features
.feature-disabled {

    color: #a4afab;
}


.package-features
.feature-disabled span {

    background: #f0f3f2;

    color: #a4afab;
}


.package-back-button,
.premium-button {
    width: 100%;

    min-height: 52px;

    margin-top: 40px;

    display: flex;

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

    border-radius: 8px;

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

    text-decoration: none;

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


.package-back-button {
    border:
        1px solid #dce5e1;

    color: #173c32;

    background: #ffffff;
}


.premium-button {
    border: none;

    background: #d1a32a;

    color: #173c32;

    cursor: pointer;
}


.package-back-button:hover,
.premium-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 25px
        rgba(20, 59, 48, 0.12);
}


/* =========================================
   ASSESSMENT PROCESS
========================================= */

.assessment-process {
    margin-top: 120px;
}


.process-heading {
    max-width: 650px;

    margin: 0 auto;

    text-align: center;
}


.process-heading > span {
    color: #b88b17;

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

    letter-spacing: 2px;
}


.process-heading h2 {
    margin-top: 16px;

    color: #173c32;

    font-size: 42px;
}


.process-heading p {
    margin-top: 18px;

    color: #71807b;

    font-size: 14px;
    line-height: 1.8;
}


.process-grid {
    display: grid;

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

    gap: 20px;

    margin-top: 55px;
}


.process-item {
    padding: 30px;

    background: #ffffff;

    border:
        1px solid #e0e8e5;

    border-radius: 14px;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}


.process-item:hover {
    transform:
        translateY(-6px);

    border-color: #c99b1f;
}


.process-number {
    color: #c99b1f;

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

    letter-spacing: 1px;
}


.process-item h3 {
    margin-top: 25px;

    color: #173c32;

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


.process-item p {
    margin-top: 12px;

    color: #7b8985;

    font-size: 12px;
    line-height: 1.7;
}


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

.continue-bottom-cta {
    margin-top: 100px;

    padding: 75px 40px;

    background: #ffffff;

    border:
        1px solid #e0e8e5;

    border-radius: 22px;

    text-align: center;
}


.continue-bottom-cta > span {
    color: #b88b17;

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

    letter-spacing: 2px;
}


.continue-bottom-cta h2 {
    max-width: 700px;

    margin: 18px auto 0;

    color: #173c32;

    font-size: 42px;
    line-height: 1.2;
}


.continue-bottom-cta p {
    margin-top: 18px;

    color: #71807b;

    font-size: 14px;
}


.continue-bottom-cta button {
    margin-top: 32px;

    padding: 17px 30px;

    border: none;
    border-radius: 8px;

    background: #173c32;

    color: #ffffff;

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


.continue-bottom-cta button:hover {
    transform:
        translateY(-3px);

    background: #245c4d;
}


/* =========================================
   CONTINUE RESPONSIVE
========================================= */

@media (max-width: 900px) {

    .assessment-comparison {
        grid-template-columns: 1fr;
    }


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

}


@media (max-width: 600px) {

    .continue-wrapper {
        padding:
            55px 15px
            80px;
    }


    .continue-hero h1 {
        font-size: 42px;
    }


    .package-card {
        padding: 38px 25px;
    }


    .package-header h2 {
        font-size: 35px;
    }


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


    .assessment-process {
        margin-top: 80px;
    }


    .process-heading h2 {
        font-size: 34px;
    }


    .continue-bottom-cta {
        margin-top: 70px;

        padding: 50px 25px;
    }


    .continue-bottom-cta h2 {
        font-size: 32px;
    }


    .continue-bottom-cta button {
        width: 100%;
    }

}

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

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

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(219, 235, 228, 0.9),
            transparent 30%
        ),
        #f7f9f8;

    color: #173c32;
}


.payment-wrapper {
    padding: 75px 20px 100px;
}


.payment-container {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;
}


/* =========================================
   PAYMENT HEADING
========================================= */

.payment-heading {
    max-width: 700px;

    margin: 0 auto 55px;

    text-align: center;
}


.payment-label {
    color: #b88b17;

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

    letter-spacing: 2px;
}


.payment-heading h1 {
    margin-top: 18px;

    color: #173c32;

    font-size: 48px;
    line-height: 1.15;
}


.payment-heading p {
    margin-top: 18px;

    color: #71807b;

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


/* =========================================
   PAYMENT LAYOUT
========================================= */

.payment-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 30px;

    align-items: stretch;
}


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

.order-summary {
    padding: 45px;

    background: #173c32;

    border-radius: 20px;

    color: #ffffff;

    box-shadow:
        0 30px 70px
        rgba(20, 59, 48, 0.16);
}


.summary-label {
    color: #d4aa37;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;
}


.order-summary h2 {
    margin-top: 15px;

    color: #ffffff;

    font-size: 35px;
    line-height: 1.2;
}


.summary-description {
    margin-top: 15px;

    color: #aec0ba;

    font-size: 13px;
    line-height: 1.7;
}


.summary-question {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 35px;

    padding: 25px 0;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.12);

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


.summary-question strong {
    color: #d4aa37;

    font-size: 55px;
    line-height: 1;
}


.summary-question span {
    color: #ffffff;

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

    letter-spacing: 1.5px;
}


.summary-question p {
    margin-top: 5px;

    color: #9db2aa;

    font-size: 11px;
}


.summary-features {
    display: flex;

    flex-direction: column;

    gap: 16px;

    margin-top: 30px;
}


.summary-features div {
    display: flex;

    align-items: center;

    gap: 12px;

    color: #dce7e3;

    font-size: 13px;
}


.summary-features span {
    width: 24px;
    height: 24px;

    display: flex;

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

    flex-shrink: 0;

    background:
        rgba(212, 170, 55, 0.12);

    border-radius: 50%;

    color: #d4aa37;

    font-weight: 800;
}


.order-price {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-top: 40px;

    padding-top: 30px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.12);
}


.order-price div {
    display: flex;

    flex-direction: column;
}


.order-price span {
    color: #ffffff;

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


.order-price small {
    margin-top: 5px;

    color: #91aaa2;

    font-size: 10px;
}


.order-price strong {
    color: #d4aa37;

    font-size: 30px;
}


/* =========================================
   PAYMENT CARD
========================================= */

.payment-card {
    padding: 45px;

    background: #ffffff;

    border:
        1px solid #e0e8e5;

    border-radius: 20px;

    box-shadow:
        0 20px 50px
        rgba(20, 59, 48, 0.06);
}


.payment-card-heading > span {
    color: #b88b17;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.8px;
}


.payment-card-heading h2 {
    margin-top: 12px;

    color: #173c32;

    font-size: 30px;
}


.payment-card-heading p {
    margin-top: 12px;

    color: #7b8985;

    font-size: 12px;
    line-height: 1.7;
}


/* =========================================
   PAYMENT USER DATA
========================================= */

.payment-user-data {
    display: grid;

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

    gap: 14px;

    margin-top: 30px;
}


.payment-data-item {
    min-width: 0;

    padding: 18px;

    background: #f7f9f8;

    border:
        1px solid #e2e9e6;

    border-radius: 10px;
}


.payment-data-item span {
    display: block;

    color: #899792;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.2px;
}


.payment-data-item strong {
    display: block;

    margin-top: 8px;

    color: #173c32;

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

    word-break: break-word;
}


/* =========================================
   PAYMENT NOTICE
========================================= */

.payment-notice {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-top: 25px;

    padding: 18px;

    background: #fffaf0;

    border:
        1px solid #eee0b9;

    border-radius: 10px;
}


.payment-notice p {
    color: #76663b;

    font-size: 11px;
    line-height: 1.6;
}


/* =========================================
   PAYMENT BUTTON
========================================= */

.payment-button {
    width: 100%;

    margin-top: 25px;

    padding: 17px;

    border: none;
    border-radius: 8px;

    background: #173c32;

    color: #ffffff;

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


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

    background: #245c4d;
}


.payment-button:disabled {
    opacity: 0.7;

    cursor: wait;

    transform: none;
}


.payment-terms {
    margin-top: 15px;

    color: #99a5a1;

    font-size: 9px;
    line-height: 1.6;

    text-align: center;
}


/* =========================================
   PAYMENT SUCCESS MODAL
========================================= */

.payment-modal {
    position: fixed;

    inset: 0;

    z-index: 999;

    padding: 20px;

    display: flex;

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

    background:
        rgba(10, 35, 28, 0.7);

    backdrop-filter:
        blur(7px);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


.payment-modal.show {
    opacity: 1;

    visibility: visible;
}


.payment-modal-card {
    width: 100%;
    max-width: 500px;

    padding: 50px;

    background: #ffffff;

    border-radius: 20px;

    text-align: center;

    transform:
        translateY(25px)
        scale(0.97);

    transition:
        transform 0.35s ease;
}


.payment-modal.show
.payment-modal-card {

    transform:
        translateY(0)
        scale(1);
}


.success-icon {
    width: 70px;
    height: 70px;

    margin: 0 auto 25px;

    display: flex;

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

    background: #e7f1ed;

    border-radius: 50%;

    color: #24614f;

    font-size: 30px;
    font-weight: 900;
}


.success-label {
    color: #b88b17;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;
}


.payment-modal-card h2 {
    margin-top: 15px;

    color: #173c32;

    font-size: 32px;
    line-height: 1.25;
}


.payment-modal-card p {
    margin-top: 17px;

    color: #71807b;

    font-size: 13px;
    line-height: 1.7;
}


.payment-modal-card button {
    width: 100%;

    margin-top: 30px;

    padding: 16px;

    border: none;
    border-radius: 8px;

    background: #173c32;

    color: #ffffff;

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

    cursor: pointer;
}


/* =========================================
   PAYMENT RESPONSIVE
========================================= */

@media (max-width: 850px) {

    .payment-layout {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .payment-wrapper {
        padding:
            50px 15px
            80px;
    }


    .payment-heading h1 {
        font-size: 36px;
    }


    .order-summary,
    .payment-card {
        padding: 35px 25px;
    }


    .payment-user-data {
        grid-template-columns: 1fr;
    }


    .order-price strong {
        font-size: 25px;
    }


    .payment-modal-card {
        padding: 40px 25px;
    }


    .payment-modal-card h2 {
        font-size: 27px;
    }

}

/* =========================================
   FULL QUIZ PAGE
========================================= */

.full-quiz-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(218, 234, 227, 0.9),
            transparent 28%
        ),
        #f7f9f8;

    color: #173c32;
}


.full-quiz-wrapper {
    padding: 70px 20px 100px;
}


.full-quiz-container {
    width: 100%;
    max-width: 950px;

    margin: 0 auto;
}


.full-quiz-heading {
    text-align: center;

    margin-bottom: 40px;
}


.full-quiz-label {
    color: #b88b17;

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

    letter-spacing: 2px;
}


.full-quiz-heading h1 {
    margin-top: 15px;

    color: #173c32;

    font-size: 48px;
}


.full-quiz-heading p {
    max-width: 650px;

    margin: 17px auto 0;

    color: #71807b;

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


/* PROGRESS */

.quiz-progress-card {
    padding: 25px 30px;

    background: #ffffff;

    border: 1px solid #e0e8e5;
    border-radius: 14px;
}


.quiz-progress-info {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.quiz-progress-info div {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


.quiz-progress-info span {
    color: #8a9894;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.quiz-progress-info strong {
    color: #173c32;

    font-size: 13px;
}


.quiz-progress-track {
    width: 100%;
    height: 7px;

    margin-top: 20px;

    background: #e8efec;

    border-radius: 50px;

    overflow: hidden;
}


.quiz-progress-bar {
    width: 0;
    height: 100%;

    background: #c99b1f;

    border-radius: 50px;

    transition: width 0.4s ease;
}


/* QUESTIONS */

.quiz-question-list {
    display: flex;

    flex-direction: column;

    gap: 15px;

    margin-top: 25px;
}


.full-question-card {
    display: grid;

    grid-template-columns: 55px 1fr;

    gap: 20px;

    padding: 25px;

    background: #ffffff;

    border: 1px solid #e0e8e5;
    border-radius: 13px;

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


.full-question-card:hover {
    border-color: #c99b1f;

    box-shadow:
        0 10px 25px
        rgba(20, 59, 48, 0.06);
}


.question-number {
    width: 48px;
    height: 48px;

    display: flex;

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

    background: #eef4f1;

    border-radius: 50%;

    color: #315e50;

    font-size: 12px;
    font-weight: 900;
}


.question-content p {
    color: #173c32;

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

    line-height: 1.6;
}


.question-options {
    display: flex;

    gap: 10px;

    margin-top: 18px;
}


.answer-option {
    min-width: 105px;

    padding: 12px 20px;

    background: #ffffff;

    border: 1px solid #dce5e1;
    border-radius: 7px;

    color: #60716b;

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

    cursor: pointer;

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


.answer-option:hover {
    transform: translateY(-2px);

    border-color: #c99b1f;
}


.answer-option.selected {
    background: #173c32;

    border-color: #173c32;

    color: #ffffff;
}


/* NAVIGATION */

.quiz-navigation {
    display: grid;

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

    align-items: center;

    gap: 20px;

    margin-top: 35px;
}


.quiz-back-button,
.quiz-next-button {
    min-height: 50px;

    padding: 0 25px;

    border-radius: 8px;

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

    cursor: pointer;
}


.quiz-back-button {
    justify-self: start;

    background: #ffffff;

    border: 1px solid #dce5e1;

    color: #173c32;
}


.quiz-next-button {
    justify-self: end;

    background: #173c32;

    border: none;

    color: #ffffff;
}


.quiz-next-button:disabled {
    opacity: 0.35;

    cursor: not-allowed;
}


.quiz-answer-status {
    color: #7a8984;

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

    text-align: center;
}


/* RESPONSIVE */

@media (max-width: 600px) {

    .full-quiz-wrapper {
        padding: 50px 15px 80px;
    }


    .full-quiz-heading h1 {
        font-size: 38px;
    }


    .full-question-card {
        grid-template-columns: 1fr;

        gap: 15px;

        padding: 22px;
    }


    .question-number {
        width: 42px;
        height: 42px;
    }


    .question-options {
        display: grid;

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


    .answer-option {
        min-width: 0;
    }


    .quiz-navigation {
        grid-template-columns: 1fr 1fr;
    }


    .quiz-answer-status {
        grid-column: 1 / -1;

        grid-row: 1;
    }


    .quiz-back-button {
        grid-column: 1;

        grid-row: 2;
    }


    .quiz-next-button {
        grid-column: 2;

        grid-row: 2;
    }

}

/* =========================================
   FULL ASSESSMENT RESULT PAGE
========================================= */

.full-result-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(218, 234, 227, 0.9),
            transparent 28%
        ),
        #f7f9f8;

    color: #173c32;
}


.full-result-wrapper {
    padding: 70px 20px 100px;
}


.full-result-container {
    width: 100%;
    max-width: 1150px;

    margin: 0 auto;
}


/* =========================================
   RESULT INTRO
========================================= */

.full-result-intro {
    max-width: 760px;

    margin: 0 auto 55px;

    text-align: center;
}


.full-result-label {
    color: #b88b17;

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

    letter-spacing: 2px;
}


.full-result-intro > p {
    margin-top: 18px;

    color: #71807b;

    font-size: 14px;
}


.full-result-intro h1 {
    margin-top: 12px;

    color: #173c32;

    font-size: 50px;
    line-height: 1.15;
}


.full-result-intro
.full-result-description {

    max-width: 600px;

    margin: 18px auto 0;

    color: #85928e;

    font-size: 13px;
    line-height: 1.7;
}


/* =========================================
   DOMINANT CHARACTER
========================================= */

.dominant-result-card {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    min-height: 650px;

    background: #ffffff;

    border: 1px solid #e0e8e5;
    border-radius: 24px;

    overflow: hidden;

    box-shadow:
        0 30px 80px
        rgba(20, 59, 48, 0.1);
}


/* =========================================
   DOMINANT IMAGE
========================================= */

.dominant-result-image {
    position: relative;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 650px;

    overflow: hidden;

    background: #e7efec;
}


.dominant-result-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(10, 39, 31, 0.15),
            transparent 45%
        );

    pointer-events: none;
}


.dominant-result-image img {
    width: 100%;
    height: 100%;

    position: absolute;

    inset: 0;

    display: block;

    object-fit: cover;
    object-position: center;

    transition:
        transform 0.8s ease;
}


.dominant-result-card:hover
.dominant-result-image img {

    transform:
        scale(1.035);
}


/* =========================================
   DOMINANT CONTENT
========================================= */

.dominant-result-content {
    min-width: 0;

    padding: 65px 55px;

    display: flex;
    flex-direction: column;

    justify-content: center;

    background: #ffffff;
}


.dominant-result-label {
    display: block;

    color: #b88b17;

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

    letter-spacing: 2px;
}


.dominant-result-content h2 {
    margin-top: 15px;

    color: #173c32;

    font-size: 48px;
    line-height: 1.1;
}


.dominant-result-type {
    margin-top: 10px;

    color: #71807b;

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


.dominant-result-percentage {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 22px;
}


.dominant-result-percentage strong {
    color: #c29418;

    font-size: 35px;
    line-height: 1;
}


.dominant-result-percentage span {
    color: #82908b;

    font-size: 11px;
}


.dominant-result-description {
    margin-top: 30px;

    color: #60716b;

    font-size: 14px;
    line-height: 1.8;
}


/* =========================================
   FULL RESULT RESPONSIVE DOMINANT
========================================= */

@media (max-width: 900px) {

    .dominant-result-card {
        grid-template-columns: 1fr;

        min-height: 0;
    }


    .dominant-result-image {
        height: 600px;
        min-height: 600px;
    }


    .dominant-result-content {
        padding: 55px 45px;
    }

}


@media (max-width: 600px) {

    .dominant-result-image {
        height: 430px;
        min-height: 430px;
    }


    .dominant-result-content {
        padding: 40px 25px;
    }


    .dominant-result-content h2 {
        font-size: 37px;
    }


    .dominant-result-percentage strong {
        font-size: 30px;
    }

}


@media (max-width: 400px) {

    .dominant-result-image {
        height: 380px;
        min-height: 380px;
    }


    .dominant-result-content {
        padding: 35px 20px;
    }


    .dominant-result-content h2 {
        font-size: 32px;
    }

}

/* =========================================
   CHARACTER INFO
========================================= */

.result-character-info {
    display: grid;

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

    gap: 18px;

    margin-top: 30px;
}


.result-character-info article {
    min-width: 0;

    padding: 28px 25px;

    background: #ffffff;

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

    box-shadow:
        0 15px 35px
        rgba(20, 59, 48, 0.05);

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


.result-character-info article:hover {
    transform:
        translateY(-5px);

    border-color: #c99b1f;

    box-shadow:
        0 18px 40px
        rgba(20, 59, 48, 0.08);
}


.result-character-info article span {
    display: block;

    color: #899792;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.4px;

    line-height: 1.5;
}


.result-character-info article strong {
    display: block;

    margin-top: 12px;

    color: #173c32;

    font-size: 17px;
    font-weight: 800;

    line-height: 1.5;
}


/* =========================================
   PRIMARY + SECONDARY CHARACTER
========================================= */

.result-character-pair {
    display: grid;

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

    gap: 20px;

    margin-top: 20px;
}


.result-character-pair-card {
    position: relative;

    min-width: 0;

    padding: 35px;

    border-radius: 16px;

    overflow: hidden;
}


.result-character-pair-card.primary {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(71, 121, 104, 0.45),
            transparent 40%
        ),
        #173c32;

    color: #ffffff;

    box-shadow:
        0 20px 50px
        rgba(20, 59, 48, 0.14);
}


.result-character-pair-card.secondary {
    background: #ffffff;

    border: 1px solid #e0e8e5;

    box-shadow:
        0 15px 35px
        rgba(20, 59, 48, 0.05);
}


.result-character-pair-card span {
    display: block;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.7px;
}


.result-character-pair-card.primary span {
    color: #d4aa37;
}


.result-character-pair-card.secondary span {
    color: #b88b17;
}


.result-character-pair-card h3 {
    margin-top: 15px;

    font-size: 25px;
    line-height: 1.3;
}


.result-character-pair-card.primary h3 {
    color: #ffffff;
}


.result-character-pair-card.secondary h3 {
    color: #173c32;
}


.result-character-pair-card strong {
    display: block;

    margin-top: 18px;

    color: #c99b1f;

    font-size: 32px;
    font-weight: 900;
}


/* =========================================
   CHARACTER INFO RESPONSIVE
========================================= */

@media (max-width: 900px) {

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

}


@media (max-width: 600px) {

    .result-character-info {
        grid-template-columns: 1fr;

        gap: 14px;

        margin-top: 20px;
    }


    .result-character-info article {
        padding: 24px 20px;
    }


    .result-character-pair {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .result-character-pair-card {
        padding: 30px 25px;
    }


    .result-character-pair-card h3 {
        font-size: 22px;
    }

}

/* =========================================
   RESULT SECTION HEADING
========================================= */

.result-section-heading {
    max-width: 650px;

    margin: 0 auto;

    text-align: center;
}


.result-section-heading > span {
    color: #b88b17;

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

    letter-spacing: 2px;
}


.result-section-heading h2 {
    margin-top: 15px;

    color: #173c32;

    font-size: 40px;
    line-height: 1.2;
}


.result-section-heading p {
    margin-top: 17px;

    color: #71807b;

    font-size: 13px;
    line-height: 1.7;
}


/* =========================================
   COMPOSITION DASHBOARD
========================================= */

.composition-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(360px, 0.85fr);

    gap: 25px;

    margin-top: 50px;

    align-items: stretch;
}


.composition-dashboard-left,
.composition-dashboard-right {
    min-width: 0;

    background: #ffffff;

    border: 1px solid #dfe8e4;
    border-radius: 20px;

    box-shadow:
        0 20px 60px
        rgba(20, 59, 48, 0.05);
}


.composition-dashboard-left {
    padding: 30px;
}


.composition-dashboard-right {
    padding: 30px 30px 25px;
}


.composition-dashboard-title > span {
    color: #b88b17;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1.7px;
}


.composition-dashboard-title h3 {
    margin-top: 8px;

    color: #173c32;

    font-size: 23px;
    line-height: 1.25;
}


/* =========================================
   LEFT COMPOSITION
========================================= */

.composition-dashboard-left .composition-card {
    margin-top: 20px;

    padding: 0;

    border: none;
    border-radius: 0;

    box-shadow: none;
}


.composition-dashboard-left .composition-item {
    grid-template-columns:
        215px
        minmax(0, 1fr);

    gap: 20px;

    padding: 20px 0;
}


.composition-dashboard-left .composition-icon {
    width: 58px;
    height: 58px;

    border-radius: 13px;
}


.composition-dashboard-left .composition-info strong {
    font-size: 13px;
}


.composition-dashboard-left .composition-info small {
    font-size: 7px;
}


.composition-dashboard-left .composition-heading {
    margin-bottom: 8px;
}


.composition-dashboard-left .composition-heading span {
    font-size: 7px;
}


.composition-dashboard-left .composition-heading strong {
    font-size: 19px;
}


.composition-dashboard-left .composition-track {
    height: 12px;
}


/* =========================================
   MINI BAR CHART
========================================= */

.mini-bar-chart {
    position: relative;

    height: 430px;

    margin-top: 30px;

    padding-left: 38px;
}


.mini-chart-grid {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 75px;
    left: 38px;
}


.mini-grid-line {
    position: absolute;

    left: 0;
    right: 0;

    height: 1px;

    background: #e3ebe7;
}


.mini-grid-line span {
    position: absolute;

    right: calc(100% + 8px);
    top: 50%;

    transform: translateY(-50%);

    color: #8b9994;

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


.mini-grid-100 {
    top: 0;
}


.mini-grid-75 {
    top: 25%;
}


.mini-grid-50 {
    top: 50%;
}


.mini-grid-25 {
    top: 75%;
}


.mini-grid-0 {
    bottom: 0;
}


.mini-chart-bars {
    position: relative;

    z-index: 2;

    height: 100%;

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

    gap: 15px;
}


.mini-chart-column {
    min-width: 0;

    display: flex;
    flex-direction: column;

    align-items: center;
}


.mini-bar-area {
    position: relative;

    width: 100%;
    height: 355px;

    display: flex;

    align-items: flex-end;
    justify-content: center;
}


.mini-bar-area > strong {
    position: absolute;

    bottom: 0;

    margin-bottom: 10px;

    font-size: 14px;
    font-weight: 900;

    line-height: 1;

    transition:
        bottom 1.2s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.mini-character-bar {
    width: 44px;
    height: 0;

    border-radius:
        9px
        9px
        3px
        3px;

    transition:
        height 1.2s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.mini-owl .mini-character-bar {
    background:
        linear-gradient(
            to top,
            #1f6547,
            #48a97a
        );
}


.mini-owl .mini-bar-area > strong {
    color: #2f7d5b;
}


.mini-lion .mini-character-bar {
    background:
        linear-gradient(
            to top,
            #bd8707,
            #edc343
        );
}


.mini-lion .mini-bar-area > strong {
    color: #c9970d;
}


.mini-cat .mini-character-bar {
    background:
        linear-gradient(
            to top,
            #2865ad,
            #5ba0ec
        );
}


.mini-cat .mini-bar-area > strong {
    color: #3478c9;
}


.mini-dolphin .mini-character-bar {
    background:
        linear-gradient(
            to top,
            #bd3f3f,
            #ed7474
        );
}


.mini-dolphin .mini-bar-area > strong {
    color: #d95353;
}


.mini-character-logo {
    width: 42px;
    height: 42px;

    margin-top: 10px;

    overflow: hidden;

    border: 3px solid #ffffff;
    border-radius: 50%;

    box-shadow:
        0 8px 18px
        rgba(20, 59, 48, 0.13);
}


.mini-character-logo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.mini-chart-column > small {
    margin-top: 7px;

    color: #73847e;

    font-size: 6px;
    font-weight: 900;

    letter-spacing: 1px;

    text-align: center;
}


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

@media (max-width: 1000px) {

    .composition-dashboard {
        grid-template-columns: 1fr;
    }


    .composition-dashboard-right {
        min-height: 520px;
    }

}


@media (max-width: 600px) {

    .composition-dashboard-left,
    .composition-dashboard-right {
        padding: 22px 18px;
    }


    .composition-dashboard-left .composition-item {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .mini-bar-chart {
        height: 390px;

        padding-left: 30px;
    }


    .mini-chart-grid {
        left: 30px;

        bottom: 70px;
    }


    .mini-bar-area {
        height: 320px;
    }


    .mini-character-bar {
        width: 30px;
    }

}


/* =========================================
   CHARACTER AXIS
========================================= */

.character-axis-section {
    margin-top: 110px;
}


.axis-grid {
    display: grid;

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

    gap: 25px;

    margin-top: 50px;
}


.axis-card {
    padding: 40px;

    background: #ffffff;

    border: 1px solid #e0e8e5;
    border-radius: 17px;
}


.axis-label {
    color: #b88b17;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.axis-card h3 {
    margin-top: 15px;

    color: #173c32;

    font-size: 23px;
    line-height: 1.4;
}


.axis-card h3 span {
    color: #9ba7a3;

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


.axis-value {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-top: 35px;
}


.axis-value strong {
    color: #173c32;

    font-size: 28px;
}


.axis-value span {
    color: #a4afab;
}


.axis-track {
    width: 100%;
    height: 12px;

    display: flex;

    margin-top: 15px;

    background: #e8efec;

    border-radius: 50px;

    overflow: hidden;
}


.axis-left {
    width: 50%;

    height: 100%;

    background: #c99b1f;

    transition:
        width 1s ease;
}


.axis-right {
    width: 50%;

    height: 100%;

    background: #173c32;

    transition:
        width 1s ease;
}


.axis-names {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    margin-top: 12px;
}


.axis-names span {
    color: #7d8b86;

    font-size: 9px;
    line-height: 1.4;
}


.axis-names span:last-child {
    text-align: right;
}


/* =========================================
   RESULT ACTION
========================================= */

.full-result-action {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 40px;

    margin-top: 100px;

    padding: 55px;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(69, 119, 102, 0.5),
            transparent 35%
        ),
        #173c32;

    border-radius: 20px;

    color: #ffffff;
}


.full-result-action div {
    max-width: 650px;
}


.full-result-action div > span {
    color: #d4aa37;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;
}


.full-result-action h2 {
    margin-top: 15px;

    color: #ffffff;

    font-size: 34px;
}


.full-result-action p {
    margin-top: 15px;

    color: #aec0ba;

    font-size: 13px;
    line-height: 1.7;
}


.full-result-action button {
    flex-shrink: 0;

    padding: 17px 25px;

    border: none;
    border-radius: 8px;

    background: #d1a32a;

    color: #173c32;

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

    cursor: pointer;

    transition:
        transform 0.3s ease;
}


.full-result-action button:hover {
    transform:
        translateY(-3px);
}


/* =========================================
   FULL RESULT RESPONSIVE
========================================= */

@media (max-width: 900px) {

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


    .dominant-image-wrapper {
        min-height: 600px;
        height: 600px;
    }


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


    .full-result-action {
        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 600px) {

    .full-result-wrapper {
        padding:
            50px 15px
            80px;
    }


    .full-result-intro h1 {
        font-size: 37px;
    }


    .dominant-image-wrapper {
        min-height: 430px;
        height: 430px;
    }


    .dominant-content {
        padding: 40px 25px;
    }


    .dominant-content h2 {
        font-size: 38px;
    }


    .dominant-info-grid {
        grid-template-columns: 1fr;
    }


    .result-section-heading h2 {
        font-size: 32px;
    }


    .character-composition,
    .character-axis-section {

        margin-top: 80px;
    }


    .composition-list {
        padding: 30px 22px;
    }


    .axis-card {
        padding: 30px 22px;
    }


    .full-result-action {
        margin-top: 75px;

        padding: 40px 25px;
    }


    .full-result-action h2 {
        font-size: 29px;
    }


    .full-result-action button {
        width: 100%;
    }

}

/* =========================================
   HR DASHBOARD
========================================= */

.hr-dashboard-page {
    min-height: 100vh;

    background: #f4f7f6;

    color: #173c32;
}


/* =========================================
   HR SIDEBAR
========================================= */

.hr-sidebar {
    position: fixed;

    top: 0;
    left: 0;
    bottom: 0;

    z-index: 100;

    width: 260px;

    padding: 35px 25px;

    display: flex;
    flex-direction: column;

    background: #173c32;

    color: #ffffff;
}


.hr-sidebar-logo {
    font-size: 17px;
    font-weight: 900;

    letter-spacing: 1px;
}


.hr-sidebar-logo span {
    color: #d1a32a;
}


.hr-sidebar-menu {
    display: flex;
    flex-direction: column;

    gap: 8px;

    margin-top: 65px;
}


.hr-menu-item {
    width: 100%;

    padding: 15px 17px;

    display: flex;

    align-items: center;

    gap: 14px;

    border: none;
    border-radius: 8px;

    background: transparent;

    color: #9fb5ad;

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

    text-align: left;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease;
}


.hr-menu-item span {
    color: #66877b;

    font-size: 9px;
}


.hr-menu-item:hover,
.hr-menu-item.active {
    background:
        rgba(255, 255, 255, 0.08);

    color: #ffffff;
}


.hr-menu-item.active span {
    color: #d1a32a;
}


.hr-sidebar-bottom {
    margin-top: auto;

    padding-top: 25px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.1);
}


.hr-sidebar-bottom span {
    color: #d1a32a;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.hr-sidebar-bottom p {
    margin-top: 7px;

    color: #76978b;

    font-size: 9px;
}


/* =========================================
   HR MAIN
========================================= */

.hr-dashboard-main {
    min-height: 100vh;

    margin-left: 260px;

    padding: 55px;
}


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

.hr-dashboard-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


.hr-header-label {
    color: #b88b17;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;
}


.hr-dashboard-header h1 {
    margin-top: 10px;

    color: #173c32;

    font-size: 35px;
}


.hr-dashboard-header h1 span {
    color: #b88b17;
}


.hr-create-button {
    padding: 15px 22px;

    border: none;
    border-radius: 8px;

    background: #173c32;

    color: #ffffff;

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

    cursor: pointer;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.hr-create-button:hover {
    transform: translateY(-2px);

    background: #245c4d;
}


/* =========================================
   HR STAT
========================================= */

.hr-stat-grid {
    display: grid;

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

    gap: 18px;

    margin-top: 45px;
}


.hr-stat-card {
    padding: 27px;

    background: #ffffff;

    border: 1px solid #e0e8e5;
    border-radius: 13px;
}


.hr-stat-card > span {
    color: #8b9994;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.3px;
}


.hr-stat-card strong {
    display: block;

    margin-top: 17px;

    color: #173c32;

    font-size: 33px;
}


.hr-stat-card p {
    margin-top: 7px;

    color: #8b9994;

    font-size: 10px;
}


.hr-stat-card.highlight {
    background: #173c32;

    border-color: #173c32;
}


.hr-stat-card.highlight > span {
    color: #d1a32a;
}


.hr-stat-card.highlight strong {
    color: #ffffff;

    font-size: 20px;

    line-height: 1.4;
}


.hr-stat-card.highlight p {
    color: #89a69c;
}


/* =========================================
   HR SECTION
========================================= */

.hr-dashboard-section {
    margin-top: 65px;
}


.hr-section-heading {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;
}


.hr-section-heading div > span {
    color: #b88b17;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.7px;
}


.hr-section-heading h2 {
    margin-top: 8px;

    color: #173c32;

    font-size: 25px;
}


.hr-section-heading button {
    border: none;

    background: transparent;

    color: #597169;

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

    cursor: pointer;
}


/* =========================================
   HR ASSESSMENT LIST
========================================= */

.hr-assessment-list {
    display: grid;

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

    gap: 18px;

    margin-top: 25px;
}


.hr-assessment-card {
    padding: 25px;

    background: #ffffff;

    border: 1px solid #e0e8e5;
    border-radius: 13px;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease;
}


.hr-assessment-card:hover {
    transform: translateY(-5px);

    border-color: #c99b1f;
}


.hr-assessment-card-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;
}


.hr-assessment-code {
    color: #b88b17;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1px;
}


.hr-assessment-status {
    padding: 5px 8px;

    background: #e9f2ee;

    border-radius: 50px;

    color: #2f6856;

    font-size: 7px;
    font-weight: 900;
}


.hr-assessment-card h3 {
    margin-top: 22px;

    color: #173c32;

    font-size: 17px;
    line-height: 1.4;
}


.hr-assessment-card > p {
    margin-top: 8px;

    color: #7f8f89;

    font-size: 11px;
}


.hr-assessment-meta {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid #e5ebe9;
}


.hr-assessment-meta span {
    display: block;

    color: #98a49f;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 1px;
}


.hr-assessment-meta strong {
    display: block;

    margin-top: 6px;

    color: #173c32;

    font-size: 11px;
}


.hr-copy-code-button {
    width: 100%;

    margin-top: 20px;

    padding: 11px;

    border: 1px solid #dce5e1;
    border-radius: 7px;

    background: #ffffff;

    color: #173c32;

    font-size: 9px;
    font-weight: 800;

    cursor: pointer;
}


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

.hr-empty-state {
    grid-column: 1 / -1;

    padding: 65px 30px;

    background: #ffffff;

    border: 1px dashed #ccd9d4;
    border-radius: 13px;

    text-align: center;
}


.hr-empty-state span {
    color: #b88b17;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.hr-empty-state h3 {
    margin-top: 13px;

    color: #173c32;

    font-size: 21px;
}


.hr-empty-state p {
    margin-top: 10px;

    color: #84938e;

    font-size: 11px;
}


/* =========================================
   HR CANDIDATE TABLE
========================================= */

.hr-candidate-table-wrapper {
    margin-top: 25px;

    overflow-x: auto;

    background: #ffffff;

    border: 1px solid #e0e8e5;
    border-radius: 13px;
}


.hr-candidate-table {
    width: 100%;

    border-collapse: collapse;
}


.hr-candidate-table th {
    padding: 18px 20px;

    border-bottom: 1px solid #e5ebe9;

    color: #8b9994;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 1.3px;

    text-align: left;
}


.hr-candidate-table td {
    padding: 18px 20px;

    border-bottom: 1px solid #edf1ef;

    color: #53665f;

    font-size: 11px;
}


.hr-candidate-table tbody tr:last-child td {
    border-bottom: none;
}


.hr-candidate-name strong {
    display: block;

    color: #173c32;

    font-size: 12px;
}


.hr-candidate-name span {
    display: block;

    margin-top: 5px;

    color: #8b9994;

    font-size: 9px;
}


.candidate-status {
    padding: 6px 9px;

    border-radius: 50px;

    font-size: 8px;
    font-weight: 800;
}


.candidate-status.completed {
    background: #e8f2ee;

    color: #2e6a56;
}


.candidate-status.waiting {
    background: #fff5dc;

    color: #99701a;
}


.candidate-detail-button {
    padding: 8px 12px;

    border: 1px solid #dce5e1;
    border-radius: 6px;

    background: #ffffff;

    color: #173c32;

    font-size: 9px;
    font-weight: 800;

    cursor: pointer;
}


.hr-empty-table {
    padding: 50px !important;

    color: #8b9994 !important;

    text-align: center;
}


/* =========================================
   HR MODAL
========================================= */

.hr-modal {
    position: fixed;

    inset: 0;

    z-index: 999;

    padding: 20px;

    display: flex;

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

    background:
        rgba(10, 35, 28, 0.72);

    backdrop-filter: blur(7px);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


.hr-modal.show {
    opacity: 1;

    visibility: visible;
}


.hr-modal-card {
    position: relative;

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

    max-height: 90vh;

    overflow-y: auto;

    padding: 45px;

    background: #ffffff;

    border-radius: 18px;

    transform:
        translateY(20px)
        scale(0.97);

    transition:
        transform 0.3s ease;
}


.hr-modal.show
.hr-modal-card {
    transform:
        translateY(0)
        scale(1);
}


.hr-modal-close {
    position: absolute;

    top: 18px;
    right: 20px;

    width: 35px;
    height: 35px;

    border: none;
    border-radius: 50%;

    background: #f1f5f3;

    color: #173c32;

    font-size: 20px;

    cursor: pointer;
}


.hr-modal-label {
    color: #b88b17;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.8px;
}


.hr-modal-card h2 {
    margin-top: 13px;

    color: #173c32;

    font-size: 29px;
}


.hr-modal-card > p {
    margin-top: 12px;

    color: #7d8d87;

    font-size: 11px;
    line-height: 1.7;
}


.hr-form-group {
    margin-top: 22px;
}


.hr-form-group label {
    display: block;

    margin-bottom: 8px;

    color: #173c32;

    font-size: 10px;
    font-weight: 800;
}


.hr-form-group input {
    width: 100%;

    padding: 14px 15px;

    border: 1px solid #dce5e1;
    border-radius: 8px;

    outline: none;

    color: #173c32;

    font-size: 12px;
}


.hr-form-group input:focus {
    border-color: #b88b17;
}


.hr-submit-assessment {
    width: 100%;

    margin-top: 28px;

    padding: 15px;

    border: none;
    border-radius: 8px;

    background: #173c32;

    color: #ffffff;

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

    cursor: pointer;
}


.hr-success-card {
    text-align: center;
}


.hr-success-icon {
    width: 65px;
    height: 65px;

    margin: 0 auto 25px;

    display: flex;

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

    background: #e8f2ee;

    border-radius: 50%;

    color: #2f6856;

    font-size: 27px;
    font-weight: 900;
}


.assessment-code-box {
    margin-top: 25px;

    padding: 22px;

    background: #f4f7f6;

    border: 1px dashed #b7c9c2;
    border-radius: 10px;
}


.assessment-code-box span {
    display: block;

    color: #899792;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.assessment-code-box strong {
    display: block;

    margin-top: 10px;

    color: #173c32;

    font-size: 28px;

    letter-spacing: 3px;
}


.hr-secondary-button {
    width: 100%;

    margin-top: 10px;

    padding: 14px;

    border: 1px solid #dce5e1;
    border-radius: 8px;

    background: #ffffff;

    color: #173c32;

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

    cursor: pointer;
}


/* =========================================
   HR RESPONSIVE
========================================= */

@media (max-width: 1100px) {

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


    .hr-assessment-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 750px) {

    .hr-sidebar {
        position: relative;

        width: 100%;
        height: auto;

        padding: 25px;
    }


    .hr-sidebar-menu {
        flex-direction: row;

        overflow-x: auto;

        margin-top: 25px;
    }


    .hr-menu-item {
        min-width: 140px;
    }


    .hr-sidebar-bottom {
        display: none;
    }


    .hr-dashboard-main {
        margin-left: 0;

        padding: 35px 20px 70px;
    }


    .hr-dashboard-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .hr-create-button {
        width: 100%;
    }


    .hr-stat-grid {
        grid-template-columns: 1fr 1fr;
    }


    .hr-assessment-list {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 500px) {

    .hr-dashboard-header h1 {
        font-size: 28px;
    }


    .hr-stat-grid {
        grid-template-columns: 1fr;
    }


    .hr-modal-card {
        padding: 40px 25px;
    }

}

/* =========================================
   CANDIDATE ENTRY PAGE
========================================= */

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

    background: #f4f7f6;

    color: #173c32;
}


/* =========================================
   CANDIDATE MAIN
========================================= */

.candidate-entry-main {
    min-height: calc(100vh - 80px);

    padding: 70px 40px;

    display: flex;

    align-items: center;
    justify-content: center;
}


.candidate-entry-wrapper {
    width: 100%;
    max-width: 1150px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, 0.8fr);

    gap: 90px;

    align-items: center;
}


/* =========================================
   CANDIDATE INTRO
========================================= */

.candidate-entry-label {
    color: #b88b17;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 2px;
}


.candidate-entry-intro h1 {
    max-width: 560px;

    margin-top: 20px;

    color: #173c32;

    font-size: clamp(
        45px,
        6vw,
        78px
    );

    line-height: 0.98;

    letter-spacing: -3px;
}


.candidate-entry-intro h1 span {
    color: #b88b17;
}


.candidate-entry-intro > p {
    max-width: 500px;

    margin-top: 30px;

    color: #71837c;

    font-size: 14px;
    line-height: 1.9;
}


/* =========================================
   CANDIDATE POINTS
========================================= */

.candidate-entry-points {
    display: flex;

    gap: 45px;

    margin-top: 50px;

    padding-top: 30px;

    border-top: 1px solid #dbe4e1;
}


.candidate-entry-points div {
    display: flex;

    flex-direction: column;
}


.candidate-entry-points strong {
    color: #173c32;

    font-size: 29px;
}


.candidate-entry-points span {
    margin-top: 6px;

    color: #899892;

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

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* =========================================
   ENTRY CARD
========================================= */

.candidate-entry-card {
    min-height: 520px;

    padding: 50px;

    display: flex;

    align-items: center;

    background: #ffffff;

    border: 1px solid #e0e8e5;
    border-radius: 20px;

    box-shadow:
        0 25px 70px
        rgba(23, 60, 50, 0.08);
}


/* =========================================
   STEP
========================================= */

.candidate-entry-step {
    width: 100%;

    display: none;
}


.candidate-entry-step.active {
    display: block;

    animation:
        candidateStepShow
        0.45s ease;
}


@keyframes candidateStepShow {

    from {

        opacity: 0;

        transform:
            translateY(15px);

    }


    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


.candidate-step-number {
    color: #b88b17;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 2px;
}


.candidate-entry-step h2 {
    margin-top: 15px;

    color: #173c32;

    font-size: 31px;

    line-height: 1.2;
}


.candidate-entry-step > p {
    margin-top: 13px;

    color: #7d8d87;

    font-size: 11px;
    line-height: 1.7;
}


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

.candidate-form-group {
    margin-top: 28px;
}


.candidate-form-group label {
    display: block;

    margin-bottom: 10px;

    color: #173c32;

    font-size: 10px;
    font-weight: 800;
}


.candidate-form-group input {
    width: 100%;

    padding: 16px 17px;

    border: 1px solid #d8e2de;
    border-radius: 9px;

    outline: none;

    background: #ffffff;

    color: #173c32;

    font-size: 13px;

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


.candidate-form-group input:focus {
    border-color: #b88b17;

    box-shadow:
        0 0 0 4px
        rgba(184, 139, 23, 0.1);
}


.candidate-form-group input.input-error {
    border-color: #b94d4d;

    box-shadow:
        0 0 0 4px
        rgba(185, 77, 77, 0.08);
}


.candidate-input-error {
    display: block;

    min-height: 17px;

    margin-top: 8px;

    color: #b94d4d;

    font-size: 9px;

    line-height: 1.5;
}


/* =========================================
   PRIMARY BUTTON
========================================= */

.candidate-primary-button {
    width: 100%;

    margin-top: 20px;

    padding: 16px;

    border: none;
    border-radius: 9px;

    background: #173c32;

    color: #ffffff;

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

    cursor: pointer;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


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

    background: #245c4d;
}


/* =========================================
   ASSESSMENT INFO
========================================= */

.candidate-assessment-info {
    margin-top: 25px;

    padding: 20px;

    background: #f4f7f6;

    border-left: 3px solid #b88b17;
    border-radius: 8px;
}


.candidate-assessment-info > span {
    color: #9a791c;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: 1.5px;
}


.candidate-assessment-info strong {
    display: block;

    margin-top: 9px;

    color: #173c32;

    font-size: 15px;
}


.candidate-assessment-info p {
    margin-top: 5px;

    color: #70817b;

    font-size: 10px;
}


.candidate-assessment-info small {
    display: block;

    margin-top: 12px;

    color: #b88b17;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1px;
}


/* =========================================
   BACK BUTTON
========================================= */

.candidate-step-back {
    margin-bottom: 25px;

    padding: 0;

    border: none;

    background: transparent;

    color: #758780;

    font-size: 9px;
    font-weight: 800;

    cursor: pointer;
}


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

@media (max-width: 900px) {

    .candidate-entry-main {
        padding:
            50px 25px
            80px;
    }


    .candidate-entry-wrapper {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .candidate-entry-intro {
        text-align: center;
    }


    .candidate-entry-intro h1,
    .candidate-entry-intro > p {
        margin-left: auto;
        margin-right: auto;
    }


    .candidate-entry-points {
        justify-content: center;
    }


    .candidate-entry-card {
        width: 100%;

        max-width: 550px;

        margin: 0 auto;
    }

}


@media (max-width: 550px) {

    .candidate-entry-main {
        padding:
            40px 18px
            70px;
    }


    .candidate-entry-intro h1 {
        font-size: 43px;

        letter-spacing: -2px;
    }


    .candidate-entry-points {
        gap: 25px;
    }


    .candidate-entry-card {
        min-height: auto;

        padding: 40px 25px;
    }


    .candidate-entry-step h2 {
        font-size: 26px;
    }

}
/* =========================================
   CANDIDATE DETAIL
========================================= */

.candidate-detail-page {
    min-height: 100vh;
    background: #f4f7f6;
    color: #173c32;
}


.candidate-detail-main {
    min-height: 100vh;
    margin-left: 260px;
    padding: 50px 55px 90px;
}


.candidate-detail-back {
    display: inline-block;
    color: #70837b;
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
}


.candidate-detail-content {
    margin-top: 45px;
}


.candidate-detail-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
}


.candidate-detail-label {
    color: #b88b17;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2px;
}


.candidate-detail-header h1 {
    margin-top: 12px;
    color: #173c32;
    font-size: 43px;
}


.candidate-detail-header p {
    margin-top: 7px;
    color: #80918b;
    font-size: 12px;
}


.candidate-detail-status {
    min-width: 150px;
    padding: 18px 22px;
    background: #e6f0ec;
    border-radius: 10px;
}


.candidate-detail-status span {
    display: block;
    color: #769087;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1px;
}


.candidate-detail-status strong {
    display: block;
    margin-top: 7px;
    color: #2f6856;
    font-size: 13px;
}


/* INFO */

.candidate-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-top: 35px;
}


.candidate-info-card {
    padding: 22px;
    background: #ffffff;
    border: 1px solid #e0e8e5;
    border-radius: 11px;
}


.candidate-info-card span {
    color: #929f9a;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.2px;
}


.candidate-info-card strong {
    display: block;
    margin-top: 10px;
    color: #173c32;
    font-size: 12px;
    line-height: 1.5;
}


/* CHARACTER */

.candidate-character-card {
    margin-top: 55px;
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    overflow: hidden;
    background: #173c32;
    border-radius: 20px;
}


.candidate-character-image {
    min-height: 470px;
    background: #244d42;
}


.candidate-character-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.candidate-character-content {
    padding: 60px;
}


.candidate-character-label {
    color: #d1a32a;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2px;
}


.candidate-character-content h2 {
    margin-top: 15px;
    color: #ffffff;
    font-size: 43px;
}


.candidate-character-type {
    margin-top: 10px;
    color: #d1a32a;
    font-size: 12px;
    font-weight: 800;
}


.candidate-character-description {
    max-width: 650px;
    margin-top: 25px;
    color: #b5c8c1;
    font-size: 12px;
    line-height: 1.9;
}


.candidate-character-highlight {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 35px;
}


.candidate-character-highlight div {
    padding: 20px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 10px;
}


.candidate-character-highlight span {
    color: #83a297;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1px;
}


.candidate-character-highlight strong {
    display: block;
    margin-top: 9px;
    color: #ffffff;
    font-size: 12px;
    line-height: 1.5;
}


/* TWO CHARACTER */

.candidate-two-character {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 20px;
}


.candidate-character-summary {
    padding: 30px;
    border-radius: 13px;
}


.candidate-character-summary.dominant {
    background: #ffffff;
    border: 1px solid #e0e8e5;
}


.candidate-character-summary.secondary {
    background: #ead9a8;
}


.candidate-character-summary span {
    color: #788b84;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.5px;
}


.candidate-character-summary h3 {
    margin-top: 13px;
    color: #173c32;
    font-size: 21px;
}


.candidate-character-summary strong {
    display: block;
    margin-top: 10px;
    color: #b88b17;
    font-size: 27px;
}


/* SECTION */

.candidate-detail-section {
    margin-top: 70px;
}


.candidate-section-heading span,
.candidate-recommendation-heading span {
    color: #b88b17;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.8px;
}


.candidate-section-heading h2,
.candidate-recommendation-heading h2 {
    margin-top: 10px;
    color: #173c32;
    font-size: 29px;
}


.candidate-section-heading p {
    margin-top: 10px;
    color: #7e9089;
    font-size: 11px;
}


/* COMPOSITION */

.candidate-composition-list {
    margin-top: 30px;
    padding: 35px;
    background: #ffffff;
    border: 1px solid #e0e8e5;
    border-radius: 15px;
}


.candidate-composition-item + .candidate-composition-item {
    margin-top: 28px;
}


.candidate-composition-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}


.candidate-composition-heading span {
    color: #173c32;
    font-size: 11px;
    font-weight: 800;
}


.candidate-composition-heading strong {
    color: #b88b17;
    font-size: 11px;
}


.candidate-composition-track {
    height: 7px;
    margin-top: 10px;
    overflow: hidden;
    background: #e8efec;
    border-radius: 50px;
}


.candidate-composition-bar {
    width: 0;
    height: 100%;
    background: #173c32;
    border-radius: 50px;
    transition: width 0.8s ease;
}


.candidate-composition-item small {
    display: block;
    margin-top: 7px;
    color: #98a49f;
    font-size: 8px;
}


/* AXIS */

.candidate-axis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 30px;
}


.candidate-axis-card {
    padding: 35px;
    background: #ffffff;
    border: 1px solid #e0e8e5;
    border-radius: 15px;
}


.candidate-axis-card > span {
    color: #b88b17;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.4px;
}


.candidate-axis-card h3 {
    margin-top: 14px;
    color: #173c32;
    font-size: 18px;
}


.candidate-axis-card h3 small {
    margin: 0 5px;
    color: #91a09a;
    font-size: 10px;
}


.candidate-axis-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
}


.candidate-axis-value strong {
    color: #173c32;
    font-size: 25px;
}


.candidate-axis-value span {
    color: #a0ada8;
}


.candidate-axis-track {
    height: 8px;
    margin-top: 15px;
    display: flex;
    overflow: hidden;
    background: #e8efec;
    border-radius: 50px;
}


.candidate-axis-left {
    width: 0;
    height: 100%;
    background: #c99b1f;
}


.candidate-axis-right {
    width: 0;
    height: 100%;
    background: #173c32;
}


/* RECOMMENDATION */

.candidate-recommendation {
    margin-top: 70px;
    padding: 50px;
    background: #173c32;
    border-radius: 20px;
}


.candidate-recommendation-heading h2 {
    color: #ffffff;
}


.candidate-recommendation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 35px;
}


.candidate-recommendation-grid article {
    padding: 25px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 11px;
}


.candidate-recommendation-grid span {
    color: #d1a32a;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.3px;
}


.candidate-recommendation-grid h3 {
    margin-top: 12px;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.5;
}


.candidate-recommendation-grid p {
    margin-top: 12px;
    color: #b7cac3;
    font-size: 11px;
    line-height: 1.8;
}


/* NOT FOUND */

.candidate-not-found {
    display: none;
    max-width: 600px;
    margin: 130px auto;
    padding: 60px;
    background: #ffffff;
    border: 1px solid #e0e8e5;
    border-radius: 18px;
    text-align: center;
}


.candidate-not-found span {
    color: #b88b17;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.5px;
}


.candidate-not-found h1 {
    margin-top: 15px;
    color: #173c32;
    font-size: 30px;
}


.candidate-not-found p {
    margin-top: 12px;
    color: #82928c;
    font-size: 11px;
}


.candidate-not-found a {
    display: inline-block;
    margin-top: 25px;
    padding: 13px 20px;
    background: #173c32;
    border-radius: 7px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}


/* RESPONSIVE */

@media (max-width: 1000px) {

    .candidate-info-grid {
        grid-template-columns: 1fr 1fr;
    }


    .candidate-character-card {
        grid-template-columns: 300px minmax(0, 1fr);
    }


    .candidate-character-content {
        padding: 40px;
    }

}


@media (max-width: 750px) {

    .candidate-detail-main {
        margin-left: 0;
        padding: 35px 20px 70px;
    }


    .candidate-detail-header {
        align-items: flex-start;
        flex-direction: column;
    }


    .candidate-detail-status {
        width: 100%;
    }


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


    .candidate-character-image {
        min-height: 350px;
        max-height: 450px;
    }


    .candidate-two-character,
    .candidate-axis-grid,
    .candidate-recommendation-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 500px) {

    .candidate-info-grid {
        grid-template-columns: 1fr;
    }


    .candidate-detail-header h1 {
        font-size: 33px;
    }


    .candidate-character-content {
        padding: 35px 25px;
    }


    .candidate-character-content h2 {
        font-size: 34px;
    }


    .candidate-character-highlight {
        grid-template-columns: 1fr;
    }


    .candidate-composition-list,
    .candidate-axis-card {
        padding: 25px;
    }


    .candidate-recommendation {
        padding: 40px 25px;
    }

}
/* =========================================
   PAYMENT PROCESS PAGE
========================================= */

.payment-process-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 85% 8%,
            rgba(218, 234, 227, 0.9) 0%,
            transparent 28%
        ),
        #f7f9f8;

    color: #173c32;
}


.payment-process-wrapper {
    padding: 75px 20px 100px;
}


.payment-process-container {
    width: 100%;
    max-width: 1150px;

    margin: 0 auto;
}


/* =========================================
   HEADING
========================================= */

.payment-process-heading {
    max-width: 700px;

    margin-bottom: 55px;
}


.payment-process-heading > span {
    color: #b88b17;

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

    letter-spacing: 2px;
}


.payment-process-heading h1 {
    margin-top: 18px;

    color: #173c32;

    font-size: 52px;
    line-height: 1.1;
}


.payment-process-heading p {
    max-width: 600px;

    margin-top: 20px;

    color: #71807b;

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


/* =========================================
   GRID
========================================= */

.payment-process-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(320px, 0.65fr);

    gap: 30px;

    align-items: start;
}


/* =========================================
   PAYMENT CARD
========================================= */

.payment-instruction-card {
    padding: 42px;

    background: #ffffff;

    border: 1px solid #e0e8e5;
    border-radius: 18px;

    box-shadow:
        0 20px 50px
        rgba(20, 59, 48, 0.06);
}


.payment-status-box {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding-bottom: 25px;

    border-bottom:
        1px solid #e3eae7;
}


.payment-status-box span {
    color: #82908b;

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

    letter-spacing: 1.5px;
}


.payment-status-box strong {
    padding: 9px 14px;

    background: #fff7df;

    border-radius: 100px;

    color: #9a7010;

    font-size: 11px;
}


/* =========================================
   PAYMENT DETAIL
========================================= */

.payment-method-detail {
    margin-top: 35px;
}


.payment-detail-label {
    color: #b88b17;

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

    letter-spacing: 1.7px;
}


.payment-method-detail h2 {
    margin-top: 12px;

    color: #173c32;

    font-size: 34px;
}


.payment-method-detail > p {
    margin-top: 12px;

    color: #71807b;

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


/* =========================================
   QRIS
========================================= */

.payment-qris-box {
    margin-top: 30px;

    padding: 30px;

    display: flex;

    justify-content: center;

    background: #f6f9f8;

    border: 1px solid #e0e8e5;
    border-radius: 14px;
}


.payment-qris-placeholder {
    width: 260px;
    height: 260px;

    display: flex;

    flex-direction: column;

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

    background:
        linear-gradient(
            45deg,
            #173c32 25%,
            transparent 25%
        ),
        linear-gradient(
            -45deg,
            #173c32 25%,
            transparent 25%
        ),
        linear-gradient(
            45deg,
            transparent 75%,
            #173c32 75%
        ),
        linear-gradient(
            -45deg,
            transparent 75%,
            #173c32 75%
        );

    background-size:
        24px 24px;

    background-position:
        0 0,
        0 12px,
        12px -12px,
        -12px 0;

    border: 14px solid #ffffff;

    box-shadow:
        0 12px 30px
        rgba(20, 59, 48, 0.12);
}


.payment-qris-placeholder span,
.payment-qris-placeholder strong,
.payment-qris-placeholder small {
    padding: 6px 10px;

    background: #ffffff;

    color: #173c32;
}


.payment-qris-placeholder span {
    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;
}


.payment-qris-placeholder strong {
    font-size: 28px;
}


.payment-qris-placeholder small {
    font-size: 8px;
    font-weight: 800;
}


/* =========================================
   BANK
========================================= */

.payment-bank-box {
    margin-top: 30px;

    padding: 30px;

    display: grid;

    gap: 8px;

    background: #f6f9f8;

    border: 1px solid #e0e8e5;
    border-radius: 14px;
}


.payment-bank-box span {
    margin-top: 12px;

    color: #84918d;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.payment-bank-box span:first-child {
    margin-top: 0;
}


.payment-bank-box strong {
    color: #173c32;

    font-size: 20px;
}


.payment-copy-button {
    width: 100%;

    min-height: 48px;

    margin-top: 15px;

    border: 1px solid #dce5e1;
    border-radius: 8px;

    background: #ffffff;

    color: #173c32;

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

    cursor: pointer;
}


/* =========================================
   NOTE
========================================= */

.payment-instruction-note {
    margin-top: 25px;

    padding: 20px;

    background: #fff9e9;

    border: 1px solid #f0dfad;
    border-radius: 10px;
}


.payment-instruction-note span {
    color: #9a7010;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1.5px;
}


.payment-instruction-note p {
    margin-top: 8px;

    color: #7d6b3b;

    font-size: 12px;
    line-height: 1.7;
}


/* =========================================
   CONFIRM BUTTON
========================================= */

.payment-confirm-button {
    width: 100%;

    min-height: 55px;

    margin-top: 30px;

    border: none;
    border-radius: 8px;

    background: #d1a32a;

    color: #173c32;

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

    cursor: pointer;

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


.payment-confirm-button:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 14px 30px
        rgba(20, 59, 48, 0.15);
}


.payment-confirm-button:disabled {
    cursor: not-allowed;

    opacity: 0.7;

    transform: none;
}


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

.payment-summary-card {
    position: sticky;

    top: 30px;

    padding: 35px;

    background: #173c32;

    border-radius: 18px;

    color: #ffffff;

    box-shadow:
        0 30px 70px
        rgba(20, 59, 48, 0.18);
}


.payment-summary-label {
    color: #d4aa37;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1.7px;
}


.payment-summary-user {
    margin-top: 25px;

    padding-bottom: 25px;

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


.payment-summary-user span {
    display: block;

    color: #8fa69e;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.4px;
}


.payment-summary-user strong {
    display: block;

    margin-top: 10px;

    color: #ffffff;

    font-size: 20px;
}


.payment-summary-user small {
    display: block;

    margin-top: 6px;

    color: #a9bbb5;

    font-size: 12px;
}


.payment-summary-row {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding: 20px 0;

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


.payment-summary-row span {
    color: #91a69f;

    font-size: 11px;
}


.payment-summary-row strong {
    max-width: 180px;

    color: #ffffff;

    font-size: 11px;

    text-align: right;
}


.payment-summary-total {
    margin-top: 25px;

    padding: 22px;

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

    border-radius: 10px;
}


.payment-summary-total span {
    display: block;

    color: #9eb0aa;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.payment-summary-total strong {
    display: block;

    margin-top: 10px;

    color: #d4aa37;

    font-size: 32px;
}


.payment-summary-security {
    display: flex;

    gap: 12px;

    margin-top: 25px;
}


.payment-summary-security span {
    font-size: 18px;
}


.payment-summary-security p {
    color: #9fb1ab;

    font-size: 11px;
    line-height: 1.7;
}


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

@media (max-width: 900px) {

    .payment-process-grid {
        grid-template-columns: 1fr;
    }


    .payment-summary-card {
        position: static;
    }

}


@media (max-width: 600px) {

    .payment-process-wrapper {
        padding:
            55px 15px
            80px;
    }


    .payment-process-heading h1 {
        font-size: 40px;
    }


    .payment-instruction-card {
        padding: 30px 22px;
    }


    .payment-status-box {
        align-items: flex-start;

        flex-direction: column;
    }


    .payment-method-detail h2 {
        font-size: 30px;
    }


    .payment-qris-box {
        padding: 20px;
    }


    .payment-qris-placeholder {
        width: 220px;
        height: 220px;
    }


    .payment-summary-card {
        padding: 30px 25px;
    }

}
/* =========================================
   CHECKOUT PAGE
========================================= */

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

    background:
        radial-gradient(
            circle at 85% 8%,
            rgba(218, 234, 227, 0.9) 0%,
            transparent 28%
        ),
        #f7f9f8;

    color: #173c32;
}


.checkout-wrapper {
    padding: 75px 20px 100px;
}


.checkout-container {
    width: 100%;
    max-width: 1150px;

    margin: 0 auto;
}


/* =========================================
   CHECKOUT HEADING
========================================= */

.checkout-heading {
    max-width: 720px;

    margin-bottom: 55px;
}


.checkout-heading > span {
    color: #b88b17;

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

    letter-spacing: 2px;
}


.checkout-heading h1 {
    max-width: 650px;

    margin-top: 18px;

    color: #173c32;

    font-size: 54px;
    line-height: 1.08;
}


.checkout-heading p {
    max-width: 620px;

    margin-top: 20px;

    color: #71807b;

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


/* =========================================
   CHECKOUT GRID
========================================= */

.checkout-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(320px, 0.65fr);

    gap: 30px;

    align-items: start;
}


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

.checkout-form-card {
    padding: 42px;

    background: #ffffff;

    border:
        1px solid #e0e8e5;

    border-radius: 18px;

    box-shadow:
        0 20px 50px
        rgba(20, 59, 48, 0.06);
}


/* =========================================
   SECTION HEADING
========================================= */

.checkout-section-heading {
    display: flex;

    align-items: flex-start;

    gap: 18px;
}


.checkout-section-heading > span {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;

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

    background: #edf4f1;

    border-radius: 50%;

    color: #2f6856;

    font-size: 11px;
    font-weight: 900;
}


.checkout-section-heading h2 {
    color: #173c32;

    font-size: 25px;
    line-height: 1.2;
}


.checkout-section-heading p {
    margin-top: 7px;

    color: #84918d;

    font-size: 12px;
    line-height: 1.6;
}


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

#checkoutForm {
    margin-top: 35px;
}


.checkout-field {
    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 22px;
}


.checkout-field:first-child {
    margin-top: 0;
}


.checkout-field label {
    color: #173c32;

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

    letter-spacing: 0.3px;
}


.checkout-field input {
    width: 100%;
    min-height: 54px;

    padding: 0 17px;

    border:
        1px solid #dce5e1;

    border-radius: 8px;

    outline: none;

    background: #fbfcfc;

    color: #173c32;

    font-family: inherit;

    font-size: 14px;

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


.checkout-field input::placeholder {
    color: #a3afab;
}


.checkout-field input:focus {
    border-color: #2f6856;

    background: #ffffff;

    box-shadow:
        0 0 0 4px
        rgba(47, 104, 86, 0.1);
}


/* =========================================
   PAYMENT SECTION
========================================= */

.checkout-payment-section {
    margin-top: 45px;

    padding-top: 35px;

    border-top:
        1px solid #e3eae7;
}


.payment-method-list {
    display: grid;

    gap: 14px;

    margin-top: 30px;
}


/* =========================================
   PAYMENT METHOD CARD
========================================= */

.payment-method-card {
    position: relative;

    min-height: 88px;

    padding: 20px;

    display: flex;

    align-items: center;

    gap: 16px;

    border:
        1px solid #dce5e1;

    border-radius: 12px;

    background: #ffffff;

    cursor: pointer;

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


.payment-method-card:hover {
    transform:
        translateY(-2px);

    border-color: #8caf9f;

    box-shadow:
        0 12px 25px
        rgba(20, 59, 48, 0.07);
}


.payment-method-card:has(
    input:checked
) {
    border-color: #2f6856;

    background: #f4f8f6;

    box-shadow:
        0 0 0 3px
        rgba(47, 104, 86, 0.08);
}


.payment-method-card input {
    width: 18px;
    height: 18px;

    flex-shrink: 0;

    accent-color: #173c32;

    cursor: pointer;
}


.payment-method-content {
    min-width: 0;

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 6px;
}


.payment-method-content strong {
    color: #173c32;

    font-size: 14px;
}


.payment-method-content span {
    max-width: 430px;

    color: #7c8a85;

    font-size: 12px;
    line-height: 1.6;
}


.payment-method-card > small {
    min-width: 54px;

    padding: 9px 10px;

    border-radius: 7px;

    background: #edf4f1;

    color: #2f6856;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1px;

    text-align: center;
}


/* =========================================
   PAY BUTTON
========================================= */

.checkout-pay-button {
    width: 100%;
    min-height: 56px;

    margin-top: 35px;

    border: none;
    border-radius: 8px;

    background: #d1a32a;

    color: #173c32;

    font-family: inherit;

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

    cursor: pointer;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}


.checkout-pay-button:hover {
    transform:
        translateY(-3px);

    background: #d8ad3a;

    box-shadow:
        0 14px 30px
        rgba(20, 59, 48, 0.14);
}


.checkout-pay-button:disabled {
    opacity: 0.7;

    cursor: not-allowed;

    transform: none;
}


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

.checkout-summary-card {
    position: sticky;

    top: 30px;

    padding: 38px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(72, 122, 105, 0.48),
            transparent 35%
        ),
        #173c32;

    border-radius: 18px;

    color: #ffffff;

    box-shadow:
        0 30px 70px
        rgba(20, 59, 48, 0.18);
}


.checkout-summary-label {
    color: #d4aa37;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1.7px;
}


.checkout-summary-card h2 {
    margin-top: 18px;

    color: #ffffff;

    font-size: 29px;
    line-height: 1.25;
}


.checkout-summary-card > p {
    margin-top: 14px;

    color: #a9bbb5;

    font-size: 12px;
    line-height: 1.7;
}


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

.checkout-summary-features {
    display: flex;

    flex-direction: column;

    gap: 15px;

    margin-top: 30px;

    padding-top: 25px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.12);
}


.checkout-summary-features div {
    display: flex;

    align-items: center;

    gap: 11px;

    color: #dce7e3;

    font-size: 12px;
}


.checkout-summary-features div span {
    width: 23px;
    height: 23px;

    flex-shrink: 0;

    display: flex;

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

    background:
        rgba(212, 170, 55, 0.12);

    border-radius: 50%;

    color: #d4aa37;

    font-size: 10px;
    font-weight: 900;
}


/* =========================================
   PRICE
========================================= */

.checkout-price {
    margin-top: 30px;

    padding: 24px;

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

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 10px;
}


.checkout-price span {
    display: block;

    color: #9fb1ab;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.checkout-price strong {
    display: block;

    margin-top: 10px;

    color: #d4aa37;

    font-size: 35px;
    line-height: 1;
}


/* =========================================
   SECURITY
========================================= */

.checkout-security {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-top: 25px;
}


.checkout-security > span {
    flex-shrink: 0;

    font-size: 17px;
}


.checkout-security p {
    color: #9fb1ab;

    font-size: 11px;
    line-height: 1.7;
}


/* =========================================
   CHECKOUT RESPONSIVE
========================================= */

@media (max-width: 900px) {

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


    .checkout-summary-card {
        position: static;
    }

}


@media (max-width: 600px) {

    .checkout-wrapper {
        padding:
            55px 15px
            80px;
    }


    .checkout-heading {
        margin-bottom: 40px;
    }


    .checkout-heading h1 {
        font-size: 40px;
    }


    .checkout-form-card {
        padding: 30px 22px;
    }


    .checkout-section-heading {
        gap: 14px;
    }


    .checkout-section-heading h2 {
        font-size: 22px;
    }


    .payment-method-card {
        padding: 17px 15px;
    }


    .payment-method-card > small {
        min-width: 46px;
    }


    .checkout-summary-card {
        padding: 30px 25px;
    }


    .checkout-summary-card h2 {
        font-size: 26px;
    }


    .checkout-price strong {
        font-size: 31px;
    }

}

/* =========================================
   FULL RESULT ANALYSIS
========================================= */

.full-result-analysis {
    margin-top: 90px;
}


.full-result-analysis-grid {
    display: grid;

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

    gap: 20px;

    margin-top: 45px;
}


.full-result-analysis-grid article {
    min-width: 0;

    padding: 38px 35px;

    background: #ffffff;

    border: 1px solid #e0e8e5;
    border-radius: 16px;

    box-shadow:
        0 15px 40px
        rgba(20, 59, 48, 0.05);
}


.full-result-analysis-grid article:first-child {
    border-top:
        4px solid #c99b1f;
}


.full-result-analysis-grid article:last-child {
    border-top:
        4px solid #173c32;
}


.full-result-analysis-grid article span {
    display: block;

    color: #b88b17;

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

    letter-spacing: 1.7px;
}


.full-result-analysis-grid article p {
    margin-top: 16px;

    color: #60716b;

    font-size: 14px;
    line-height: 1.8;
}


/* =========================================
   FULL RESULT ACTION
========================================= */

.full-result-action {
    margin-top: 80px;

    padding: 45px 50px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(72, 122, 105, 0.45),
            transparent 40%
        ),
        #173c32;

    border-radius: 20px;

    box-shadow:
        0 25px 60px
        rgba(20, 59, 48, 0.14);
}


.full-result-action p {
    max-width: 620px;

    margin: 0;

    color: #dce7e3;

    font-size: 13px;
    line-height: 1.8;
}


.full-result-home-button {
    flex-shrink: 0;

    min-width: 190px;
    min-height: 52px;

    padding: 0 25px;

    display: flex;

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

    background: #d1a32a;

    border-radius: 8px;

    color: #173c32;

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

    text-decoration: none;

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


.full-result-home-button:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.18);
}


/* =========================================
   ANALYSIS + ACTION RESPONSIVE
========================================= */

@media (max-width: 700px) {

    .full-result-analysis {
        margin-top: 65px;
    }


    .full-result-analysis-grid {
        grid-template-columns: 1fr;

        margin-top: 35px;
    }


    .full-result-analysis-grid article {
        padding: 30px 25px;
    }


    .full-result-action {
        margin-top: 60px;

        padding: 40px 30px;

        flex-direction: column;

        align-items: flex-start;
    }


    .full-result-home-button {
        width: 100%;
    }

}
/* =========================================
   FIX AXIS LABEL
========================================= */

.axis-score-row {
    display: grid;

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

    align-items: center;

    gap: 18px;

    margin-top: 35px;
}


.axis-score-row strong:first-child {
    text-align: left;
}


.axis-score-row strong:last-child {
    text-align: right;
}


.axis-score-row strong {
    color: #173c32;

    font-size: 27px;
    font-weight: 900;
}


.axis-score-row span {
    min-width: 120px;

    color: #8a9893;

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

    text-align: center;

    white-space: nowrap;
}


/* =========================================
   AXIS BAR
========================================= */

.axis-bar {
    width: 100%;
    height: 10px;

    margin-top: 18px;

    display: flex;

    overflow: hidden;

    background: #e5ece9;

    border-radius: 999px;
}


.axis-bar > div {
    height: 100%;
}


@media (max-width: 600px) {

    .axis-score-row {
        gap: 10px;
    }


    .axis-score-row strong {
        font-size: 22px;
    }


    .axis-score-row span {
        min-width: 70px;

        font-size: 8px;

        white-space: normal;
    }

}
/* =========================================
   FINAL AXIS VALUE DESIGN
========================================= */

.axis-value {
    display: grid;

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

    align-items: center;

    gap: 20px;

    margin-top: 35px;
}


.axis-value-side {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 8px;
}


.axis-value-left {
    align-items: flex-start;

    text-align: left;
}


.axis-value-right {
    align-items: flex-end;

    text-align: right;
}


.axis-value-side strong {
    color: #173c32;

    font-size: 28px;
    font-weight: 900;

    line-height: 1;
}


.axis-value-side small {
    color: #8a9893;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.2px;

    line-height: 1.4;
}


.axis-versus {
    width: 34px;
    height: 34px;

    display: flex;

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

    background: #f2f6f4;

    border: 1px solid #dfe8e4;
    border-radius: 50%;

    color: #b88b17;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 0.5px;
}


.axis-track {
    width: 100%;
    height: 10px;

    margin-top: 20px;

    display: flex;

    overflow: hidden;

    background: #e5ece9;

    border-radius: 999px;
}


.axis-track .axis-left,
.axis-track .axis-right {
    height: 100%;

    transition:
        width 0.8s ease;
}


.axis-track .axis-left {
    background: #c99b1f;
}


.axis-track .axis-right {
    background: #173c32;
}


@media (max-width: 600px) {

    .axis-value {
        gap: 10px;

        margin-top: 28px;
    }


    .axis-value-side strong {
        font-size: 23px;
    }


    .axis-value-side small {
        font-size: 7px;

        letter-spacing: 0.8px;
    }


    .axis-versus {
        width: 30px;
        height: 30px;

        font-size: 7px;
    }

}
/* =========================================
   CHARACTER COMPOSITION GRAPH FINAL
========================================= */

.character-composition {
    margin-top: 100px;
}


.character-composition .composition-card {
    margin-top: 50px;

    padding: 25px 35px;

    background: #ffffff;

    border: 1px solid #dfe8e4;
    border-radius: 20px;

    box-shadow:
        0 20px 60px
        rgba(20, 59, 48, 0.05);
}


/* =========================================
   COMPOSITION ITEM
========================================= */

.character-composition .composition-item {
    display: grid;

    grid-template-columns:
        300px
        minmax(0, 1fr);

    align-items: center;

    gap: 40px;

    padding: 25px 0;

    border-bottom:
        1px solid #edf2f0;
}


.character-composition
.composition-item:last-child {

    border-bottom: none;
}


/* =========================================
   CHARACTER
========================================= */

.composition-character {
    display: flex;

    align-items: center;

    gap: 18px;
}


.composition-icon {
    width: 72px;
    height: 72px;

    flex-shrink: 0;

    overflow: hidden;

    border-radius: 16px;

    background: #edf2f0;
}


.composition-icon img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition:
        transform 0.5s ease;
}


.composition-item:hover
.composition-icon img {

    transform:
        scale(1.1);
}


.composition-info {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


.composition-info strong {
    color: #173c32;

    font-size: 16px;
    font-weight: 800;
}


.composition-info small {
    color: #84928d;

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

    letter-spacing: 0.5px;

    text-transform: uppercase;
}


/* =========================================
   GRAPH
========================================= */

.character-composition
.composition-graph {

    min-width: 0;
}


.character-composition
.composition-heading {

    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 12px;
}


.character-composition
.composition-heading span {

    color: #899792;

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

    letter-spacing: 1px;

    text-transform: uppercase;
}


.character-composition
.composition-heading strong {

    font-size: 25px;
    font-weight: 900;
}


.character-composition
.composition-track {

    width: 100%;
    height: 18px;

    overflow: hidden;

    background: #e9efed;

    border-radius: 999px;
}


.character-composition
.composition-bar {

    width: 0;
    height: 100%;

    border-radius: 999px;

    transition:
        width 1.2s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.character-composition
.composition-graph > small {

    display: block;

    margin-top: 8px;

    color: #84928d;

    font-size: 10px;
}


/* =========================================
   OWL GREEN
========================================= */

.composition-owl
.composition-icon {

    box-shadow:
        0 8px 22px
        rgba(47, 125, 91, 0.22);
}


.composition-owl
.composition-heading strong {

    color: #2f7d5b;
}


.composition-owl
.composition-bar {

    background:
        linear-gradient(
            90deg,
            #1f6547,
            #46a678
        ) !important;
}


/* =========================================
   LION YELLOW
========================================= */

.composition-lion
.composition-icon {

    box-shadow:
        0 8px 22px
        rgba(212, 165, 31, 0.24);
}


.composition-lion
.composition-heading strong {

    color: #c9970d;
}


.composition-lion
.composition-bar {

    background:
        linear-gradient(
            90deg,
            #bd8707,
            #e6b934
        ) !important;
}


/* =========================================
   CAT BLUE
========================================= */

.composition-cat
.composition-icon {

    box-shadow:
        0 8px 22px
        rgba(52, 120, 201, 0.24);
}


.composition-cat
.composition-heading strong {

    color: #3478c9;
}


.composition-cat
.composition-bar {

    background:
        linear-gradient(
            90deg,
            #2865ad,
            #5599e5
        ) !important;
}


/* =========================================
   DOLPHIN RED
========================================= */

.composition-dolphin
.composition-icon {

    box-shadow:
        0 8px 22px
        rgba(217, 83, 83, 0.24);
}


.composition-dolphin
.composition-heading strong {

    color: #d95353;
}


.composition-dolphin
.composition-bar {

    background:
        linear-gradient(
            90deg,
            #bd3f3f,
            #e76c6c
        ) !important;
}


/* =========================================
   HOVER
========================================= */

.character-composition
.composition-item {

    transition:
        transform 0.3s ease;
}


.character-composition
.composition-item:hover {

    transform:
        translateX(5px);
}


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

@media (max-width: 800px) {

    .character-composition
    .composition-card {

        padding:
            15px
            25px;
    }


    .character-composition
    .composition-item {

        grid-template-columns: 1fr;

        gap: 20px;

        padding: 28px 0;
    }

}


@media (max-width: 500px) {

    .character-composition {
        margin-top: 70px;
    }


    .character-composition
    .composition-card {

        margin-top: 35px;

        padding:
            10px
            18px;
    }


    .composition-icon {
        width: 60px;
        height: 60px;

        border-radius: 13px;
    }


    .composition-info strong {
        font-size: 14px;
    }


    .character-composition
    .composition-heading strong {

        font-size: 21px;
    }


    .character-composition
    .composition-track {

        height: 14px;
    }

}
/* =========================================
   CANDIDATE COMPOSITION DASHBOARD
========================================= */

.candidate-composition-dashboard {
    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(350px, 0.85fr);

    gap: 25px;

    margin-top: 50px;

    align-items: stretch;
}


.candidate-composition-left,
.candidate-composition-right {
    min-width: 0;

    background: #ffffff;

    border: 1px solid #dfe8e4;
    border-radius: 20px;

    box-shadow:
        0 20px 60px
        rgba(20, 59, 48, 0.05);
}


.candidate-composition-left {
    padding: 30px;
}


.candidate-composition-right {
    padding: 30px 30px 25px;
}


/* =========================================
   TITLE
========================================= */

.candidate-composition-title > span {
    color: #b88b17;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1.7px;
}


.candidate-composition-title h3 {
    margin-top: 8px;

    color: #173c32;

    font-size: 23px;
    line-height: 1.25;
}


/* =========================================
   LEFT COMPOSITION LIST
========================================= */

.candidate-composition-left
.candidate-composition-list {

    margin-top: 20px;
}


.candidate-composition-left
.candidate-composition-item {

    display: grid;

    grid-template-columns:
        215px
        minmax(0, 1fr);

    align-items: center;

    gap: 20px;

    padding: 20px 0;

    border-bottom:
        1px solid #e7eeeb;
}


.candidate-composition-left
.candidate-composition-item:last-child {

    border-bottom: none;
}


/* =========================================
   CHARACTER INFO
========================================= */

.candidate-comp-character {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 15px;
}


.candidate-comp-icon {
    width: 58px;
    height: 58px;

    flex-shrink: 0;

    overflow: hidden;

    border-radius: 13px;

    background: #edf2f0;
}


.candidate-comp-icon img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition:
        transform 0.4s ease;
}


.candidate-composition-item:hover
.candidate-comp-icon img {

    transform:
        scale(1.08);
}


.candidate-comp-info {
    min-width: 0;
}


.candidate-comp-info strong {
    display: block;

    color: #173c32;

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

    line-height: 1.4;
}


.candidate-comp-info small {
    display: block;

    margin-top: 7px;

    color: #82918c;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


/* =========================================
   HORIZONTAL GRAPH
========================================= */

.candidate-comp-graph {
    min-width: 0;
}


.candidate-composition-left
.candidate-composition-heading {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 8px;
}


.candidate-composition-left
.candidate-composition-heading span {

    color: #87958f;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 1px;
}


.candidate-composition-left
.candidate-composition-heading strong {

    font-size: 19px;
    font-weight: 900;
}


.candidate-composition-left
.candidate-composition-track {

    width: 100%;
    height: 12px;

    overflow: hidden;

    background: #e7eeeb;

    border-radius: 999px;
}


.candidate-composition-left
.candidate-composition-bar {

    width: 0;
    height: 100%;

    border-radius: inherit;

    transition:
        width 1.1s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.candidate-comp-graph > small {
    display: block;

    margin-top: 8px;

    color: #80908a;

    font-size: 8px;
}


/* =========================================
   OWL - GREEN
========================================= */

.candidate-comp-owl
.candidate-composition-bar {

    background:
        linear-gradient(
            90deg,
            #1f6547,
            #48a97a
        ) !important;
}


.candidate-comp-owl
.candidate-composition-heading strong {

    color: #2f7d5b;
}


.candidate-comp-owl
.candidate-comp-icon {

    box-shadow:
        0 10px 25px
        rgba(47, 125, 91, 0.2);
}


/* =========================================
   LION - YELLOW
========================================= */

.candidate-comp-lion
.candidate-composition-bar {

    background:
        linear-gradient(
            90deg,
            #bd8707,
            #edc343
        ) !important;
}


.candidate-comp-lion
.candidate-composition-heading strong {

    color: #c9970d;
}


.candidate-comp-lion
.candidate-comp-icon {

    box-shadow:
        0 10px 25px
        rgba(201, 151, 13, 0.2);
}


/* =========================================
   CAT - BLUE
========================================= */

.candidate-comp-cat
.candidate-composition-bar {

    background:
        linear-gradient(
            90deg,
            #2865ad,
            #5ba0ec
        ) !important;
}


.candidate-comp-cat
.candidate-composition-heading strong {

    color: #3478c9;
}


.candidate-comp-cat
.candidate-comp-icon {

    box-shadow:
        0 10px 25px
        rgba(52, 120, 201, 0.2);
}


/* =========================================
   DOLPHIN - RED
========================================= */

.candidate-comp-dolphin
.candidate-composition-bar {

    background:
        linear-gradient(
            90deg,
            #bd3f3f,
            #ed7474
        ) !important;
}


.candidate-comp-dolphin
.candidate-composition-heading strong {

    color: #d95353;
}


.candidate-comp-dolphin
.candidate-comp-icon {

    box-shadow:
        0 10px 25px
        rgba(217, 83, 83, 0.2);
}


/* =========================================
   CANDIDATE MINI BAR CHART
========================================= */

.candidate-mini-chart {
    position: relative;

    height: 430px;

    margin-top: 30px;

    padding-left: 38px;
}


/* =========================================
   GRID
========================================= */

.candidate-mini-grid {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 75px;
    left: 38px;
}


.candidate-grid-line {
    position: absolute;

    left: 0;
    right: 0;

    height: 1px;

    background: #e3ebe7;
}


.candidate-grid-line span {
    position: absolute;

    right: calc(100% + 8px);
    top: 50%;

    transform:
        translateY(-50%);

    color: #8b9994;

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


.candidate-grid-100 {
    top: 0;
}


.candidate-grid-75 {
    top: 25%;
}


.candidate-grid-50 {
    top: 50%;
}


.candidate-grid-25 {
    top: 75%;
}


.candidate-grid-0 {
    bottom: 0;
}


/* =========================================
   VERTICAL BARS
========================================= */

.candidate-mini-bars {
    position: relative;

    z-index: 2;

    height: 100%;

    display: grid;

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

    gap: 15px;
}


.candidate-mini-column {
    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: center;
}


.candidate-mini-bar-area {
    position: relative;

    width: 100%;
    height: 355px;

    display: flex;

    align-items: flex-end;
    justify-content: center;
}


.candidate-mini-bar-area > strong {
    position: absolute;

    bottom: 0;

    margin-bottom: 10px;

    font-size: 14px;
    font-weight: 900;

    line-height: 1;

    z-index: 3;

    transition:
        bottom 1.1s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.candidate-mini-bar {
    width: 44px;
    height: 0;

    border-radius:
        9px
        9px
        3px
        3px;

    box-shadow:
        0 12px 24px
        rgba(20, 59, 48, 0.12);

    transition:
        height 1.1s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


/* =========================================
   VERTICAL OWL
========================================= */

.candidate-mini-owl
.candidate-mini-bar {

    background:
        linear-gradient(
            to top,
            #1f6547,
            #48a97a
        );
}


.candidate-mini-owl
.candidate-mini-bar-area > strong {

    color: #2f7d5b;
}


/* =========================================
   VERTICAL LION
========================================= */

.candidate-mini-lion
.candidate-mini-bar {

    background:
        linear-gradient(
            to top,
            #bd8707,
            #edc343
        );
}


.candidate-mini-lion
.candidate-mini-bar-area > strong {

    color: #c9970d;
}


/* =========================================
   VERTICAL CAT
========================================= */

.candidate-mini-cat
.candidate-mini-bar {

    background:
        linear-gradient(
            to top,
            #2865ad,
            #5ba0ec
        );
}


.candidate-mini-cat
.candidate-mini-bar-area > strong {

    color: #3478c9;
}


/* =========================================
   VERTICAL DOLPHIN
========================================= */

.candidate-mini-dolphin
.candidate-mini-bar {

    background:
        linear-gradient(
            to top,
            #bd3f3f,
            #ed7474
        );
}


.candidate-mini-dolphin
.candidate-mini-bar-area > strong {

    color: #d95353;
}


/* =========================================
   MINI CHARACTER LOGO
========================================= */

.candidate-mini-logo {
    width: 42px;
    height: 42px;

    margin-top: 10px;

    flex-shrink: 0;

    overflow: hidden;

    border: 3px solid #ffffff;
    border-radius: 50%;

    background: #edf2f0;

    box-shadow:
        0 8px 18px
        rgba(20, 59, 48, 0.13);
}


.candidate-mini-logo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


.candidate-mini-column > small {
    margin-top: 7px;

    color: #73847e;

    font-size: 6px;
    font-weight: 900;

    letter-spacing: 1px;

    text-align: center;
}


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

@media (max-width: 1100px) {

    .candidate-composition-dashboard {
        grid-template-columns: 1fr;
    }


    .candidate-composition-right {
        min-height: 520px;
    }

}


@media (max-width: 650px) {

    .candidate-composition-left,
    .candidate-composition-right {
        padding: 22px 18px;
    }


    .candidate-composition-left
    .candidate-composition-item {

        grid-template-columns: 1fr;

        gap: 15px;
    }


    .candidate-mini-chart {
        height: 390px;

        padding-left: 30px;
    }


    .candidate-mini-grid {
        left: 30px;

        bottom: 70px;
    }


    .candidate-mini-bar-area {
        height: 320px;
    }


    .candidate-mini-bar {
        width: 30px;
    }

}/* =========================================
   HERO PHOTO VISUAL
========================================= */

.hero-visual {
    width: 100%;

    display: flex;

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

    padding-left: 35px;
}


.hero-photo-frame {
    position: relative;

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

    overflow: hidden;

    border-radius: 28px;

    background: #eef4f1;

    box-shadow:
        0 30px 70px
        rgba(20, 59, 48, 0.13);

    transform:
        translateY(35px);
}


.hero-main-photo {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position:
        center center;

    transition:
        transform 0.6s ease;
}


.hero-photo-frame:hover
.hero-main-photo {

    transform:
        scale(1.035);
}


/* =========================================
   HERO PHOTO DECORATION
========================================= */

.hero-photo-frame::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 70%,
            rgba(20, 59, 48, 0.08)
        );
}


/* =========================================
   HERO PHOTO RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    .hero-visual {
        padding-left: 0;
    }


    .hero-photo-frame {
        max-width: 600px;
        height: 470px;
    }

}


@media (max-width: 700px) {

    .hero-photo-frame {
        height: 390px;

        border-radius: 22px;

        transform: none;
    }

}
/* =========================================
   ABOUT & CHARACTER SECTION
========================================= */

.about,
.character {
    position: relative;

    width: 100%;

    padding:
        110px 20px;

    background: #ffffff;
}


.character {
    background: #f7f9f8;
}


.about .section-title,
.character .section-title {
    width: 100%;
    max-width: 850px;

    margin: 0 auto;

    text-align: center;
}


.about .section-title > span,
.character .section-title > span {
    display: inline-block;

    color: #b88b17;

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

    letter-spacing: 2px;

    text-transform: uppercase;
}


.about .section-title h2,
.character .section-title h2 {
    max-width: 800px;

    margin:
        18px auto 0;

    color: #173c32;

    font-size: 52px;
    font-weight: 800;

    line-height: 1.15;
}


.about .section-title p,
.character .section-title p {
    max-width: 720px;

    margin:
        28px auto 0;

    color: #71807b;

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


/* =========================================
   ABOUT DECORATION
========================================= */

.about::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 420px;
    height: 420px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(218, 234, 227, 0.7),
            transparent 68%
        );
}


/* =========================================
   CHARACTER DECORATION
========================================= */

.character::before {
    content: "";

    position: absolute;

    bottom: 0;
    left: 0;

    width: 350px;
    height: 350px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(209, 163, 42, 0.08),
            transparent 70%
        );
}


/* =========================================
   SECTION TITLE POSITION
========================================= */

.about .section-title,
.character .section-title {
    position: relative;

    z-index: 2;
}


/* =========================================
   ABOUT & CHARACTER RESPONSIVE
========================================= */

@media (max-width: 700px) {

    .about,
    .character {
        padding:
            80px 20px;
    }


    .about .section-title h2,
    .character .section-title h2 {
        font-size: 38px;
    }


    .about .section-title p,
    .character .section-title p {
        margin-top: 22px;

        font-size: 14px;
    }

}
/* =========================================
   INDEX LOWER SECTION SIZE FIX
========================================= */

.about,
.character {
    width: 100% !important;

    min-height: 520px !important;

    padding: 110px 40px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
}


.about .section-title,
.character .section-title {
    width: 100% !important;
    max-width: 900px !important;

    margin: 0 auto !important;

    text-align: center !important;

    transform: none !important;
    scale: 1 !important;
}


.about .section-title > span,
.character .section-title > span {
    display: block !important;

    margin-bottom: 18px !important;

    color: #c9970d !important;

    font-size: 11px !important;
    font-weight: 900 !important;

    line-height: 1.2 !important;
    letter-spacing: 2.5px !important;
}


.about .section-title h2,
.character .section-title h2 {
    width: 100% !important;
    max-width: 850px !important;

    margin: 0 auto !important;

    color: #173c32 !important;

    font-size: 52px !important;
    font-weight: 800 !important;

    line-height: 1.15 !important;

    transform: none !important;
}


.about .section-title p,
.character .section-title p {
    width: 100% !important;
    max-width: 720px !important;

    margin: 28px auto 0 !important;

    color: #71807b !important;

    font-size: 16px !important;
    font-weight: 400 !important;

    line-height: 1.8 !important;

    transform: none !important;
}


/* =========================================
   ASSESSMENT SIZE FIX
========================================= */

.assessment {
    min-height: 500px !important;

    padding: 100px 40px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
}


.assessment-content {
    width: 100% !important;
    max-width: 800px !important;

    margin: 0 auto !important;

    text-align: center !important;

    transform: none !important;
    scale: 1 !important;
}


.assessment-content > span {
    font-size: 11px !important;

    letter-spacing: 2.5px !important;
}


.assessment-content h2 {
    max-width: 700px !important;

    margin: 18px auto 0 !important;

    font-size: 48px !important;
    line-height: 1.15 !important;
}


.assessment-content p {
    max-width: 620px !important;

    margin: 24px auto 0 !important;

    font-size: 16px !important;
    line-height: 1.8 !important;
}


.assessment-content button {
    margin-top: 30px !important;

    padding: 17px 30px !important;

    font-size: 14px !important;
}


/* =========================================
   LOWER SECTION RESPONSIVE
========================================= */

@media (max-width: 700px) {

    .about,
    .character {
        min-height: auto !important;

        padding: 80px 20px !important;
    }


    .about .section-title h2,
    .character .section-title h2 {
        font-size: 36px !important;
    }


    .about .section-title p,
    .character .section-title p {
        font-size: 14px !important;
    }


    .assessment {
        min-height: auto !important;

        padding: 80px 20px !important;
    }


    .assessment-content h2 {
        font-size: 36px !important;
    }


    .assessment-content p {
        font-size: 14px !important;
    }

}
/* =========================================
   ABOUT CONTENT
========================================= */

.about-container,
.character-container {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
}


.about-benefits {
    display: grid;

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

    gap: 24px;

    margin-top: 65px;
}


.benefit-card {
    position: relative;

    min-height: 250px;

    padding: 38px 34px;

    background: #ffffff;

    border: 1px solid #dfe8e4;
    border-radius: 18px;

    box-shadow:
        0 20px 50px
        rgba(20, 59, 48, 0.05);

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


.benefit-card:hover {
    transform:
        translateY(-7px);

    box-shadow:
        0 28px 60px
        rgba(20, 59, 48, 0.1);
}


.benefit-number {
    color: #c99b1f;

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

    letter-spacing: 2px;
}


.benefit-card h3 {
    margin-top: 35px;

    color: #173c32;

    font-size: 23px;
}


.benefit-card p {
    margin-top: 16px !important;

    color: #71807b;

    font-size: 14px !important;
    line-height: 1.8;

    text-align: left;
}


/* =========================================
   CHARACTER PREVIEW
========================================= */

.character-preview-grid {
    display: grid;

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

    gap: 18px;

    margin-top: 65px;
}


.character-preview {
    position: relative;

    min-height: 210px;

    padding: 35px 28px;

    display: flex;

    flex-direction: column;
    justify-content: flex-end;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dfe8e4;
    border-radius: 18px;

    transition:
        transform 0.3s ease;
}


.character-preview:hover {
    transform:
        translateY(-7px);
}


.character-preview::before {
    content: "";

    position: absolute;

    top: 30px;
    left: 28px;

    width: 55px;
    height: 6px;

    border-radius: 20px;
}


.character-preview strong {
    position: relative;

    z-index: 2;

    color: #173c32;

    font-size: 20px;
    line-height: 1.35;
}


.character-preview span {
    position: relative;

    z-index: 2;

    margin-top: 10px;

    color: #84928d;

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

    letter-spacing: 1.2px;
}


.character-preview.owl::before {
    background: #2f805d;
}


.character-preview.lion::before {
    background: #e2ae1d;
}


.character-preview.cat::before {
    background: #3478c9;
}


.character-preview.dolphin::before {
    background: #df5757;
}


/* =========================================
   ABOUT CHARACTER RESPONSIVE
========================================= */

@media (max-width: 900px) {

    .about-benefits {
        grid-template-columns: 1fr;
    }


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

}


@media (max-width: 600px) {

    .character-preview-grid {
        grid-template-columns: 1fr;
    }


    .benefit-card,
    .character-preview {
        min-height: auto;
    }

}
/* =========================================
   PREMIUM ASSESSMENT CTA
========================================= */

.assessment {
    width: 100% !important;

    min-height: auto !important;

    padding: 90px 40px !important;

    background: #f7f9f8 !important;

    box-sizing: border-box !important;
}


.assessment-cta-container {
    position: relative;

    width: 100%;
    max-width: 1200px;
    min-height: 520px;

    margin: 0 auto;

    padding: 75px 80px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(380px, 0.8fr);

    gap: 60px;

    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 88% 15%,
            rgba(72, 122, 105, 0.55),
            transparent 35%
        ),
        #173c32;

    border-radius: 28px;

    box-shadow:
        0 35px 80px
        rgba(20, 59, 48, 0.16);
}


.assessment-cta-content {
    position: relative;

    z-index: 3;

    width: 100%;

    text-align: left !important;
}


.assessment-label {
    display: inline-block;

    color: #d4aa37;

    font-size: 11px !important;
    font-weight: 900;

    letter-spacing: 2.5px;
}


.assessment-cta-content h2 {
    max-width: 620px !important;

    margin: 20px 0 0 !important;

    color: #ffffff;

    font-size: 54px !important;
    font-weight: 800;

    line-height: 1.08 !important;
}


.assessment-cta-content h2 span {
    display: block;

    color: #d4aa37;
}


.assessment-cta-content p {
    max-width: 590px !important;

    margin: 28px 0 0 !important;

    color: #b7c9c3;

    font-size: 15px !important;
    line-height: 1.8 !important;
}


.assessment-cta-actions {
    display: flex;

    align-items: center;

    gap: 28px;

    margin-top: 38px;
}


.assessment-cta-actions button {
    min-height: 56px;

    margin: 0 !important;

    padding: 0 28px !important;

    display: flex;

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

    gap: 18px;

    border: none;
    border-radius: 9px;

    background: #d1a32a;

    color: #173c32;

    font-size: 14px !important;
    font-weight: 900;

    cursor: pointer;

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


.assessment-cta-actions button span {
    font-size: 20px;

    transition:
        transform 0.3s ease;
}


.assessment-cta-actions button:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 18px 35px
        rgba(0, 0, 0, 0.18);
}


.assessment-cta-actions button:hover span {
    transform:
        translateX(5px);
}


.assessment-mini-info {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.assessment-mini-info strong {
    color: #ffffff;

    font-size: 13px;
}


.assessment-mini-info span {
    color: #93aaa2;

    font-size: 11px;
}


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

.assessment-cta-visual {
    position: relative;

    z-index: 3;

    width: 100%;
    height: 360px;

    display: flex;

    align-items: center;
    justify-content: center;
}


.cta-center-circle {
    position: relative;

    z-index: 3;

    width: 210px;
    height: 210px;

    display: flex;

    flex-direction: column;

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

    border:
        1px solid
        rgba(255, 255, 255, 0.16);

    border-radius: 50%;

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

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, 0.15);
}


.cta-center-circle::before {
    content: "";

    position: absolute;

    width: 255px;
    height: 255px;

    border:
        1px solid
        rgba(212, 170, 55, 0.2);

    border-radius: 50%;
}


.cta-center-circle span {
    color: #b7c9c3;

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

    letter-spacing: 3px;
}


.cta-center-circle strong {
    margin-top: 8px;

    color: #ffffff;

    font-size: 42px;
    line-height: 1;
}


.cta-center-circle small {
    margin-top: 5px;

    color: #d4aa37;

    font-size: 18px;
    font-weight: 900;

    letter-spacing: 4px;
}


.cta-stat-card {
    position: absolute;

    z-index: 4;

    width: 150px;
    min-height: 115px;

    padding: 22px;

    background: #ffffff;

    border-radius: 16px;

    box-shadow:
        0 20px 45px
        rgba(0, 0, 0, 0.15);
}


.cta-stat-card strong {
    display: block;

    color: #173c32;

    font-size: 34px;
    line-height: 1;
}


.cta-stat-card span {
    display: block;

    margin-top: 10px;

    color: #71807b;

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


.cta-stat-one {
    top: 25px;
    left: 0;

    transform:
        rotate(-5deg);
}


.cta-stat-two {
    right: 0;
    bottom: 20px;

    transform:
        rotate(5deg);
}


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

.assessment-decoration {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.decoration-one {
    width: 350px;
    height: 350px;

    top: -200px;
    left: -100px;

    border:
        1px solid
        rgba(212, 170, 55, 0.12);
}


.decoration-two {
    width: 500px;
    height: 500px;

    right: -250px;
    bottom: -320px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);
}


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

@media (max-width: 1000px) {

    .assessment-cta-container {
        grid-template-columns: 1fr;

        padding: 65px 55px;

        gap: 35px;
    }


    .assessment-cta-content {
        text-align: center !important;
    }


    .assessment-cta-content h2,
    .assessment-cta-content p {
        margin-left: auto !important;
        margin-right: auto !important;
    }


    .assessment-cta-actions {
        justify-content: center;
    }


    .assessment-cta-visual {
        max-width: 500px;

        margin: 0 auto;
    }

}


@media (max-width: 600px) {

    .assessment {
        padding:
            60px 15px !important;
    }


    .assessment-cta-container {
        padding:
            55px 25px;

        border-radius: 22px;
    }


    .assessment-cta-content h2 {
        font-size: 38px !important;
    }


    .assessment-cta-actions {
        flex-direction: column;

        gap: 20px;
    }


    .assessment-cta-actions button {
        width: 100%;
    }


    .assessment-mini-info {
        align-items: center;
    }


    .assessment-cta-visual {
        height: 310px;
    }


    .cta-center-circle {
        width: 170px;
        height: 170px;
    }


    .cta-center-circle::before {
        width: 205px;
        height: 205px;
    }


    .cta-stat-card {
        width: 115px;
        min-height: 95px;

        padding: 17px;
    }


    .cta-stat-card strong {
        font-size: 27px;
    }


    .cta-stat-one {
        top: 15px;
    }


    .cta-stat-two {
        bottom: 10px;
    }

}
/* =========================================
   FOOTER SOCIAL MEDIA
========================================= */

footer {
    padding:
        55px 20px 45px;

    text-align: center;
}


.footer-social {
    display: flex;

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

    gap: 14px;

    margin-top: 25px;
    margin-bottom: 28px;
}


.social-link {
    min-width: 135px;
    min-height: 44px;

    padding: 0 17px;

    display: flex;

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

    gap: 9px;

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius: 10px;

    color: #ffffff;

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

    text-decoration: none;

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


.social-link:hover {
    transform:
        translateY(-4px);

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

    border-color:
        rgba(212, 170, 55, 0.5);
}


.social-icon {
    width: 27px;
    height: 27px;

    display: flex;

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

    border-radius: 7px;

    background: #d1a32a;

    color: #173c32;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0;
}


.footer-copyright {
    display: block;

    color: #77948b;

    font-size: 10px;
}


@media (max-width: 500px) {

    .footer-social {
        flex-direction: column;

        width: 100%;
    }


    .social-link {
        width: 100%;
        max-width: 280px;
    }

}
/* =========================================
   NAVBAR HR ACTION
========================================= */

.nav-actions {
    display: flex;

    align-items: center;

    gap: 12px;
}


.btn-hr-login {
    min-height: 42px;

    padding: 0 18px;

    display: flex;

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

    border:
        1px solid #d5e0dc;

    border-radius: 8px;

    background: #ffffff;

    color: #173c32;

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

    text-decoration: none;

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


.btn-hr-login:hover {
    transform:
        translateY(-2px);

    border-color: #173c32;

    background: #f7f9f8;
}


@media (max-width: 700px) {

    .nav-actions {
        gap: 7px;
    }


    .btn-hr-login {
        min-height: 38px;

        padding: 0 12px;

        font-size: 11px;
    }

}
/* =========================================
   HR LOGIN PAGE
========================================= */

.hr-login-page {
    min-height: 100vh;

    margin: 0;

    background: #f7f9f8;

    color: #173c32;
}


.hr-login-main {
    min-height: 100vh;
}


.hr-login-layout {
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(500px, 0.8fr);
}


/* =========================================
   HR LOGIN INTRO
========================================= */

.hr-login-intro {
    position: relative;

    min-height: 100vh;

    padding:
        55px 80px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(72, 122, 105, 0.5),
            transparent 35%
        ),
        #173c32;

    color: #ffffff;
}


.hr-login-intro::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -280px;
    bottom: -300px;

    border:
        1px solid
        rgba(212, 170, 55, 0.14);

    border-radius: 50%;
}


.hr-login-intro::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -120px;
    bottom: -150px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 50%;
}


.hr-login-logo {
    position: relative;

    z-index: 2;

    color: #ffffff;

    font-size: 18px;
    font-weight: 900;

    letter-spacing: 1px;

    text-decoration: none;
}


.hr-login-logo span {
    color: #d4aa37;
}


.hr-login-copy {
    position: relative;

    z-index: 2;

    max-width: 680px;

    padding:
        80px 0;
}


.hr-login-label {
    color: #d4aa37;

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

    letter-spacing: 2.5px;
}


.hr-login-copy h1 {
    margin-top: 22px;

    color: #ffffff;

    font-size: 64px;
    font-weight: 800;

    line-height: 1.05;
}


.hr-login-copy h1 span {
    display: block;

    color: #d4aa37;
}


.hr-login-copy > p {
    max-width: 580px;

    margin-top: 30px;

    color: #b8cbc4;

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


.hr-login-points {
    display: flex;

    flex-direction: column;

    gap: 16px;

    margin-top: 45px;
}


.hr-login-points div {
    display: flex;

    align-items: center;

    gap: 17px;

    padding:
        16px 0;

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


.hr-login-points strong {
    color: #d4aa37;

    font-size: 11px;

    letter-spacing: 1px;
}


.hr-login-points span {
    color: #dce7e3;

    font-size: 13px;
}


.hr-login-copyright {
    position: relative;

    z-index: 2;

    color: #78978d;

    font-size: 10px;
}


/* =========================================
   HR LOGIN FORM SIDE
========================================= */

.hr-login-form-side {
    min-height: 100vh;

    padding:
        60px;

    display: flex;

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

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(218, 234, 227, 0.85),
            transparent 32%
        ),
        #f7f9f8;
}


.hr-login-card {
    width: 100%;
    max-width: 470px;

    padding:
        50px;

    background: #ffffff;

    border:
        1px solid #dfe8e4;

    border-radius: 22px;

    box-shadow:
        0 30px 70px
        rgba(20, 59, 48, 0.09);
}


.hr-login-card-header > span {
    color: #b88b17;

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

    letter-spacing: 2px;
}


.hr-login-card-header h2 {
    margin-top: 16px;

    color: #173c32;

    font-size: 38px;

    line-height: 1.15;
}


.hr-login-card-header p {
    margin-top: 15px;

    color: #71807b;

    font-size: 13px;
    line-height: 1.7;
}


#hrLoginForm {
    margin-top: 38px;
}


.hr-form-group {
    margin-top: 22px;
}


.hr-form-group:first-child {
    margin-top: 0;
}


.hr-form-group label {
    display: block;

    margin-bottom: 10px;

    color: #173c32;

    font-size: 12px;
    font-weight: 800;
}


.hr-form-group input {
    width: 100%;
    min-height: 52px;

    padding:
        0 16px;

    box-sizing: border-box;

    border:
        1px solid #dce5e1;

    border-radius: 8px;

    outline: none;

    background: #ffffff;

    color: #173c32;

    font-size: 13px;

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


.hr-form-group input:focus {
    border-color: #2f6856;

    box-shadow:
        0 0 0 4px
        rgba(47, 104, 86, 0.08);
}


.hr-password-input {
    position: relative;
}


.hr-password-input input {
    padding-right: 90px;
}


.hr-password-input button {
    position: absolute;

    top: 50%;
    right: 10px;

    transform:
        translateY(-50%);

    padding:
        8px 10px;

    border: none;

    background: transparent;

    color: #b88b17;

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

    cursor: pointer;
}


.hr-login-error {
    min-height: 18px;

    margin-top: 18px;

    color: #c94e4e;

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


.hr-login-submit {
    width: 100%;
    min-height: 54px;

    padding:
        0 20px;

    display: flex;

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

    gap: 18px;

    border: none;

    border-radius: 8px;

    background: #173c32;

    color: #ffffff;

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

    cursor: pointer;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


.hr-login-submit span {
    font-size: 18px;

    transition:
        transform 0.3s ease;
}


.hr-login-submit:hover {
    transform:
        translateY(-3px);

    background: #245c4d;

    box-shadow:
        0 16px 30px
        rgba(20, 59, 48, 0.15);
}


.hr-login-submit:hover span {
    transform:
        translateX(5px);
}


.hr-login-back {
    margin-top: 30px;

    padding-top: 25px;

    border-top:
        1px solid #e4ebe8;

    text-align: center;
}


.hr-login-back a {
    color: #71807b;

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

    text-decoration: none;
}


.hr-login-back a:hover {
    color: #173c32;
}


/* =========================================
   HR LOGIN RESPONSIVE
========================================= */

@media (max-width: 1000px) {

    .hr-login-layout {
        grid-template-columns: 1fr;
    }


    .hr-login-intro {
        min-height: auto;

        padding:
            45px 40px;
    }


    .hr-login-copy {
        padding:
            70px 0;
    }


    .hr-login-copy h1 {
        font-size: 52px;
    }


    .hr-login-form-side {
        min-height: auto;

        padding:
            80px 30px;
    }

}


@media (max-width: 600px) {

    .hr-login-intro {
        padding:
            35px 22px;
    }


    .hr-login-copy {
        padding:
            60px 0;
    }


    .hr-login-copy h1 {
        font-size: 42px;
    }


    .hr-login-copy > p {
        font-size: 14px;
    }


    .hr-login-form-side {
        padding:
            55px 15px;
    }


    .hr-login-card {
        padding:
            38px 25px;
    }


    .hr-login-card-header h2 {
        font-size: 32px;
    }

}

/* =========================================
   HR FREEMIUM DASHBOARD
========================================= */


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

.hr-header-actions {
    display: flex;

    align-items: center;

    gap: 12px;
}


.hr-header-plan {
    min-height: 46px;

    padding: 0 17px;

    display: flex;

    flex-direction: column;

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

    border:
        1px solid #dce5e1;

    border-radius: 8px;

    background: #ffffff;
}


.hr-header-plan span {
    color: #8a9893;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: 1.3px;
}


.hr-header-plan strong {
    margin-top: 4px;

    color: #173c32;

    font-size: 12px;
    font-weight: 900;
}


.hr-upgrade-button {
    min-height: 46px;

    padding: 0 20px;

    border:
        1px solid #d1a32a;

    border-radius: 8px;

    background: #fffaf0;

    color: #9c7510;

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

    cursor: pointer;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


.hr-upgrade-button:hover {
    transform:
        translateY(-3px);

    background: #d1a32a;

    color: #173c32;

    box-shadow:
        0 12px 25px
        rgba(209, 163, 42, 0.18);
}


/* =========================================
   SIDEBAR PREMIUM MENU
========================================= */

.hr-premium-menu {
    position: relative;
}


.hr-menu-premium-content {
    min-width: 0;

    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 4px;
}


.hr-menu-premium-content strong {
    color: inherit;

    font-size: inherit;
    font-weight: inherit;
}


.hr-menu-premium-content small {
    color: #d4aa37;

    font-size: 6px;
    font-weight: 900;

    letter-spacing: 1.2px;
}


.hr-menu-lock {
    margin-left: auto;

    font-size: 11px;
}


/* =========================================
   SIDEBAR PACKAGE
========================================= */

.hr-sidebar-package {
    margin:
        auto 18px 25px;

    padding: 20px;

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.045);
}


.hr-sidebar-package > span {
    color: #829f95;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: 1.5px;
}


.hr-package-status {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 15px;
}


.hr-package-status div:first-child {
    min-width: 0;
}


.hr-package-status strong {
    display: block;

    color: #ffffff;

    font-size: 15px;
    font-weight: 900;
}


.hr-package-status small {
    display: block;

    margin-top: 5px;

    color: #91aaa1;

    font-size: 8px;
}


.hr-package-dot {
    width: 9px;
    height: 9px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #d1a32a;

    box-shadow:
        0 0 0 5px
        rgba(209, 163, 42, 0.1);
}


.hr-sidebar-package button {
    width: 100%;
    min-height: 42px;

    margin-top: 18px;

    padding: 0 14px;

    display: flex;

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

    gap: 12px;

    border: none;
    border-radius: 7px;

    background: #d1a32a;

    color: #173c32;

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

    cursor: pointer;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


.hr-sidebar-package button:hover {
    transform:
        translateY(-3px);

    background: #e0b43c;
}


.hr-sidebar-package button span {
    font-size: 15px;

    transition:
        transform 0.3s ease;
}


.hr-sidebar-package button:hover span {
    transform:
        translateX(4px);
}


/* =========================================
   FREE PLAN NOTICE
========================================= */

.hr-plan-notice {
    position: relative;

    margin-bottom: 32px;

    padding: 30px 35px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 40px;

    overflow: hidden;

    border:
        1px solid
        rgba(209, 163, 42, 0.2);

    border-radius: 16px;

    background:
        radial-gradient(
            circle at 95% 0%,
            rgba(209, 163, 42, 0.13),
            transparent 35%
        ),
        #fffdf7;
}


.hr-plan-notice::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -100px;
    bottom: -130px;

    border:
        1px solid
        rgba(209, 163, 42, 0.18);

    border-radius: 50%;
}


.hr-plan-notice-content {
    position: relative;

    z-index: 2;

    max-width: 750px;
}


.hr-plan-notice-content > span {
    color: #b88b17;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1.7px;
}


.hr-plan-notice-content h2 {
    margin-top: 10px;

    color: #173c32;

    font-size: 22px;
    line-height: 1.35;
}


.hr-plan-notice-content h2 strong {
    color: #b88b17;

    font-weight: 800;
}


.hr-plan-notice-content p {
    max-width: 680px;

    margin-top: 10px;

    color: #71807b;

    font-size: 11px;
    line-height: 1.7;
}


.hr-plan-notice > button {
    position: relative;

    z-index: 2;

    min-width: 150px;
    min-height: 46px;

    padding: 0 18px;

    display: flex;

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

    gap: 12px;

    border: none;
    border-radius: 8px;

    background: #173c32;

    color: #ffffff;

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

    cursor: pointer;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


.hr-plan-notice > button:hover {
    transform:
        translateY(-3px);

    background: #245c4d;
}


.hr-plan-notice > button span {
    font-size: 16px;
}


/* =========================================
   PREMIUM PREVIEW
========================================= */

.hr-premium-preview {
    position: relative;

    margin-top: 32px;
    margin-bottom: 45px;

    padding: 38px;

    overflow: hidden;

    border-radius: 20px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(72, 122, 105, 0.5),
            transparent 35%
        ),
        #173c32;

    box-shadow:
        0 25px 60px
        rgba(20, 59, 48, 0.12);
}


.hr-premium-preview::before {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -220px;
    bottom: -260px;

    border:
        1px solid
        rgba(212, 170, 55, 0.15);

    border-radius: 50%;
}


.hr-premium-preview-heading {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 30px;
}


.hr-premium-preview-heading > div:first-child {
    max-width: 650px;
}


.hr-premium-preview-heading span {
    color: #d4aa37;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1.8px;
}


.hr-premium-preview-heading h2 {
    margin-top: 10px;

    color: #ffffff;

    font-size: 28px;
    line-height: 1.25;
}


.hr-premium-preview-heading p {
    max-width: 590px;

    margin-top: 12px;

    color: #abc0b9;

    font-size: 11px;
    line-height: 1.7;
}


.hr-premium-preview-badge {
    flex-shrink: 0;

    padding: 10px 14px;

    border:
        1px solid
        rgba(212, 170, 55, 0.25);

    border-radius: 7px;

    background:
        rgba(212, 170, 55, 0.08);

    color: #d4aa37;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1px;
}


/* =========================================
   PREMIUM FEATURE GRID
========================================= */

.hr-premium-feature-grid {
    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 14px;

    margin-top: 30px;
}


.hr-premium-feature {
    min-height: 150px;

    padding: 22px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 12px;

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

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


.hr-premium-feature:hover {
    transform:
        translateY(-5px);

    background:
        rgba(255, 255, 255, 0.07);
}


.hr-premium-feature > span {
    color: #d4aa37;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1px;
}


.hr-premium-feature h3 {
    margin-top: 24px;

    color: #ffffff;

    font-size: 15px;
    line-height: 1.4;
}


.hr-premium-feature p {
    margin-top: 10px;

    color: #9fb5ad;

    font-size: 9px;
    line-height: 1.65;
}


.hr-premium-preview-button {
    position: relative;

    z-index: 2;

    min-height: 46px;

    margin-top: 28px;

    padding: 0 20px;

    display: flex;

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

    gap: 15px;

    border: none;
    border-radius: 8px;

    background: #d1a32a;

    color: #173c32;

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

    cursor: pointer;

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


.hr-premium-preview-button:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 15px 30px
        rgba(0, 0, 0, 0.18);
}


.hr-premium-preview-button span {
    font-size: 17px;
}


/* =========================================
   PREMIUM LOCK MODAL
========================================= */

.hr-premium-lock-card {
    max-width: 530px;

    text-align: center;
}


.hr-premium-lock-icon {
    width: 72px;
    height: 72px;

    margin:
        0 auto 25px;

    display: flex;

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

    border-radius: 50%;

    background: #fff8e7;

    font-size: 27px;

    box-shadow:
        0 12px 30px
        rgba(209, 163, 42, 0.12);
}


.hr-premium-lock-card h2 {
    max-width: 390px;

    margin:
        15px auto 0;
}


.hr-premium-lock-card > p {
    max-width: 420px;

    margin:
        15px auto 0;

    line-height: 1.7;
}


.hr-premium-lock-features {
    display: flex;

    flex-direction: column;

    gap: 11px;

    margin:
        28px 0;

    padding:
        22px;

    border:
        1px solid #e1e9e6;

    border-radius: 12px;

    background: #f8faf9;

    text-align: left;
}


.hr-premium-lock-features div {
    display: flex;

    align-items: center;

    gap: 11px;

    color: #53645e;

    font-size: 11px;
}


.hr-premium-lock-features div span {
    width: 23px;
    height: 23px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 50%;

    background: #e7f0ec;

    color: #2f6856;

    font-size: 9px;
    font-weight: 900;
}


/* =========================================
   PREMIUM ACTIVE STATE
========================================= */

.hr-dashboard-page.hr-premium-active
.hr-plan-notice {

    display: none;
}


.hr-dashboard-page.hr-premium-active
.hr-premium-preview {

    display: none;
}


.hr-dashboard-page.hr-premium-active
.hr-upgrade-button {

    display: none;
}


.hr-dashboard-page.hr-premium-active
#btnSidebarUpgrade {

    display: none;
}


.hr-dashboard-page.hr-premium-active
.hr-package-dot {

    background: #54b985;

    box-shadow:
        0 0 0 5px
        rgba(84, 185, 133, 0.12);
}


.hr-dashboard-page.hr-premium-active
.hr-header-plan {

    border-color:
        rgba(209, 163, 42, 0.4);

    background: #fffaf0;
}


.hr-dashboard-page.hr-premium-active
.hr-header-plan strong {

    color: #b88b17;
}


.hr-dashboard-page.hr-premium-active
.hr-premium-menu small,
.hr-dashboard-page.hr-premium-active
.hr-menu-lock {

    display: none;
}


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

@media (max-width: 1200px) {

    .hr-premium-feature-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .hr-header-actions {
        flex-wrap: wrap;

        justify-content: flex-end;
    }

}


@media (max-width: 900px) {

    .hr-plan-notice {
        flex-direction: column;

        align-items: flex-start;
    }


    .hr-plan-notice > button {
        width: 100%;
    }


    .hr-premium-preview-heading {
        flex-direction: column;
    }


    .hr-premium-preview-badge {
        align-self: flex-start;
    }

}


@media (max-width: 700px) {

    .hr-header-actions {
        width: 100%;

        justify-content: flex-start;
    }


    .hr-header-plan {
        flex: 1;
    }


    .hr-upgrade-button,
    .hr-create-button {
        flex: 1;
    }


    .hr-plan-notice {
        padding: 25px 22px;
    }


    .hr-premium-preview {
        padding: 28px 22px;
    }


    .hr-premium-feature-grid {
        grid-template-columns: 1fr;
    }


    .hr-premium-feature {
        min-height: auto;
    }

}
/* =========================================
   HR PAYMENT PAGE
========================================= */

.hr-payment-page {
    min-height: 100vh;

    margin: 0;

    background:
        radial-gradient(
            circle at 95% 5%,
            rgba(218, 234, 227, 0.9),
            transparent 25%
        ),
        #f7f9f8;

    color: #173c32;
}


.hr-payment-main {
    min-height: 100vh;

    padding:
        45px 25px 100px;
}


.hr-payment-container {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
}


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

.hr-payment-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 25px;
}


.hr-payment-logo {
    color: #173c32;

    font-size: 17px;
    font-weight: 900;

    letter-spacing: 1px;

    text-decoration: none;
}


.hr-payment-logo span {
    color: #c99b1f;
}


.hr-payment-back {
    color: #71807b;

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

    text-decoration: none;
}


.hr-payment-back:hover {
    color: #173c32;
}


/* =========================================
   PAYMENT HERO
========================================= */

.hr-payment-hero {
    max-width: 760px;

    margin:
        85px auto 65px;

    text-align: center;
}


.hr-payment-label {
    color: #b88b17;

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

    letter-spacing: 2.5px;
}


.hr-payment-hero h1 {
    margin-top: 20px;

    color: #173c32;

    font-size: 58px;
    line-height: 1.08;
}


.hr-payment-hero h1 span {
    display: block;

    color: #c99b1f;
}


.hr-payment-hero p {
    max-width: 650px;

    margin:
        25px auto 0;

    color: #71807b;

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


/* =========================================
   PAYMENT LAYOUT
========================================= */

.hr-payment-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(380px, 0.75fr);

    gap: 30px;

    align-items: start;
}


/* =========================================
   PACKAGE
========================================= */

.hr-payment-package {
    position: relative;

    padding: 48px;

    overflow: hidden;

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 95% 5%,
            rgba(72, 122, 105, 0.5),
            transparent 35%
        ),
        #173c32;

    color: #ffffff;

    box-shadow:
        0 30px 70px
        rgba(20, 59, 48, 0.16);
}


.hr-payment-package-top {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 25px;
}


.hr-payment-package-top > div:first-child {
    max-width: 450px;
}


.hr-payment-package-top span {
    color: #d4aa37;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 2px;
}


.hr-payment-package-top h2 {
    margin-top: 13px;

    color: #ffffff;

    font-size: 40px;
}


.hr-payment-package-top p {
    margin-top: 13px;

    color: #adc1ba;

    font-size: 12px;
    line-height: 1.7;
}


.hr-payment-badge {
    padding: 10px 13px;

    border:
        1px solid
        rgba(212, 170, 55, 0.3);

    border-radius: 7px;

    background:
        rgba(212, 170, 55, 0.1);

    color: #d4aa37;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: 1px;
}


/* =========================================
   PRICE
========================================= */

.hr-payment-price {
    display: flex;

    align-items: flex-end;

    gap: 8px;

    margin-top: 42px;

    padding-bottom: 35px;

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


.hr-payment-price > span {
    margin-bottom: 8px;

    color: #d4aa37;

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


.hr-payment-price strong {
    color: #ffffff;

    font-size: 60px;
    line-height: 0.9;
}


.hr-payment-price small {
    margin-bottom: 6px;

    color: #91aaa1;

    font-size: 11px;
}


/* =========================================
   FEATURES
========================================= */

.hr-payment-features {
    display: grid;

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

    gap: 16px 20px;

    margin-top: 35px;
}


.hr-payment-features div {
    display: flex;

    align-items: center;

    gap: 11px;

    color: #dce7e3;

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


.hr-payment-features div span {
    width: 24px;
    height: 24px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(212, 170, 55, 0.12);

    color: #d4aa37;

    font-size: 9px;
    font-weight: 900;
}


/* =========================================
   PACKAGE NOTE
========================================= */

.hr-payment-package-note {
    margin-top: 38px;

    padding: 22px;

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.04);
}


.hr-payment-package-note span {
    color: #d4aa37;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: 1.5px;
}


.hr-payment-package-note p {
    margin-top: 9px;

    color: #9fb5ad;

    font-size: 10px;
    line-height: 1.7;
}


/* =========================================
   CHECKOUT
========================================= */

.hr-payment-checkout {
    padding: 42px;

    border:
        1px solid #dfe8e4;

    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 25px 60px
        rgba(20, 59, 48, 0.07);
}


.hr-checkout-label,
.hr-payment-method-label {
    color: #b88b17;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1.8px;
}


.hr-payment-checkout > h2 {
    margin-top: 13px;

    color: #173c32;

    font-size: 31px;
}


.hr-checkout-description {
    margin-top: 12px;

    color: #71807b;

    font-size: 11px;
    line-height: 1.7;
}


/* =========================================
   ORDER
========================================= */

.hr-order-summary {
    display: flex;

    flex-direction: column;

    gap: 16px;

    margin-top: 30px;

    padding:
        23px 0;

    border-top:
        1px solid #e4ebe8;

    border-bottom:
        1px solid #e4ebe8;
}


.hr-order-summary div {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.hr-order-summary span {
    color: #84928d;

    font-size: 10px;
}


.hr-order-summary strong {
    color: #173c32;

    font-size: 11px;
}


.hr-order-total {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    padding:
        25px 0;
}


.hr-order-total span {
    color: #84928d;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1.3px;
}


.hr-order-total strong {
    color: #173c32;

    font-size: 28px;
}


/* =========================================
   PAYMENT METHOD
========================================= */

.hr-payment-method {
    margin-top: 8px;
}


.hr-payment-method-label {
    display: block;

    margin-bottom: 15px;
}


.hr-payment-option {
    position: relative;

    min-height: 65px;

    margin-top: 10px;

    padding:
        0 17px;

    display: flex;

    align-items: center;

    gap: 14px;

    border:
        1px solid #dce5e1;

    border-radius: 9px;

    cursor: pointer;
}


.hr-payment-option input {
    width: 16px;
    height: 16px;

    accent-color: #173c32;
}


.hr-payment-option div {
    flex: 1;
}


.hr-payment-option strong {
    display: block;

    color: #173c32;

    font-size: 11px;
}


.hr-payment-option span {
    display: block;

    margin-top: 5px;

    color: #84928d;

    font-size: 9px;
}


.hr-payment-option b {
    color: #2f805d;

    font-size: 11px;
}


/* =========================================
   SUBMIT PAYMENT
========================================= */

.hr-payment-submit {
    width: 100%;
    min-height: 55px;

    margin-top: 28px;

    display: flex;

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

    gap: 17px;

    border: none;
    border-radius: 8px;

    background: #173c32;

    color: #ffffff;

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

    cursor: pointer;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


.hr-payment-submit:hover {
    transform:
        translateY(-3px);

    background: #245c4d;

    box-shadow:
        0 15px 30px
        rgba(20, 59, 48, 0.16);
}


.hr-payment-submit span {
    font-size: 18px;
}


.hr-payment-security {
    margin-top: 18px;

    color: #93a09c;

    font-size: 8px;
    line-height: 1.6;

    text-align: center;
}


/* =========================================
   PAYMENT PROCESS MODAL
========================================= */

.hr-payment-process-card {
    max-width: 500px;

    text-align: center;
}


.hr-payment-process-icon {
    width: 72px;
    height: 72px;

    margin:
        0 auto 25px;

    display: flex;

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

    border-radius: 50%;

    background: #fff8e7;

    color: #b88b17;

    font-size: 18px;
    font-weight: 900;
}


.hr-payment-test-summary {
    display: grid;

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

    gap: 12px;

    margin:
        28px 0;
}


.hr-payment-test-summary div {
    padding: 18px;

    border:
        1px solid #e1e9e6;

    border-radius: 10px;

    background: #f8faf9;
}


.hr-payment-test-summary span {
    display: block;

    color: #84928d;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: 1.2px;
}


.hr-payment-test-summary strong {
    display: block;

    margin-top: 8px;

    color: #173c32;

    font-size: 13px;
}


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

@media (max-width: 950px) {

    .hr-payment-layout {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 650px) {

    .hr-payment-main {
        padding:
            30px 15px 70px;
    }


    .hr-payment-hero {
        margin:
            65px auto 45px;
    }


    .hr-payment-hero h1 {
        font-size: 42px;
    }


    .hr-payment-package,
    .hr-payment-checkout {
        padding: 32px 24px;
    }


    .hr-payment-package-top {
        flex-direction: column;
    }


    .hr-payment-price strong {
        font-size: 48px;
    }


    .hr-payment-features {
        grid-template-columns: 1fr;
    }


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

}
/* =========================================
   TEST LAPORAN HR
========================================= */

.hr-report-main {
    margin-left: 250px !important;
    padding: 55px !important;
    background: #f7f9f8 !important;
}

.hr-report-section {
    margin-top: 30px !important;
    padding: 38px !important;
    border: 1px solid #dfe8e4 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
}

.hr-report-stat-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
}

.hr-report-stat-card {
    padding: 25px !important;
    border: 1px solid #dfe8e4 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
}

.hr-character-report-layout {
    display: grid !important;
    grid-template-columns: 1.3fr 0.7fr !important;
    gap: 35px !important;
}

.hr-chart-row {
    display: grid !important;
    grid-template-columns: 190px 1fr 55px !important;
    gap: 18px !important;
    align-items: center !important;
}

.hr-chart-track {
    height: 14px !important;
    background: #edf2f0 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
}

.hr-chart-bar {
    height: 100% !important;
    border-radius: 999px !important;
}

.owl-bar {
    background: #3f8f68 !important;
}

.lion-bar {
    background: #d5a82e !important;
}

.cat-bar {
    background: #4b83b8 !important;
}

.dolphin-bar {
    background: #cf5a5a !important;
}

.hr-axis-report-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 15px !important;
}

.hr-axis-report-card {
    padding: 23px !important;
    border: 1px solid #e0e8e5 !important;
    border-radius: 12px !important;
    background: #f9fbfa !important;
}


/* =========================================================
   LAPORAN HR - FINAL FIX
========================================================= */
.hr-report-page{min-height:100vh;margin:0;background:#f7f9f8;color:#173c32}
.hr-report-page .hr-sidebar{position:fixed;inset:0 auto 0 0;width:280px;height:100vh;padding:42px 27px 35px;display:flex;flex-direction:column;background:#173c32;color:#fff;z-index:200}
.hr-report-page .hr-sidebar-logo{color:#fff;font-size:20px;font-weight:900;letter-spacing:1.4px}
.hr-report-page .hr-sidebar-logo span{color:#d4aa37}
.hr-report-page .hr-sidebar-menu{display:flex;flex-direction:column;gap:8px;margin-top:72px}
.hr-report-page .hr-menu-item{width:100%;min-height:48px;padding:0 18px;display:flex;align-items:center;gap:16px;border-radius:9px;color:#b7cac3;text-decoration:none;font-size:13px;font-weight:700;transition:.25s}
.hr-report-page .hr-menu-item span{color:#6f9a8b;font-size:9px}
.hr-report-page .hr-menu-item:hover,.hr-report-page .hr-menu-item.active{background:rgba(255,255,255,.09);color:#fff}
.hr-report-page .hr-menu-item.active span{color:#d4aa37}
.hr-report-page .hr-sidebar-package{margin:90px 20px 0;padding:28px 22px;border:1px solid rgba(255,255,255,.12);border-radius:15px;background:rgba(255,255,255,.04)}
.hr-report-page .hr-sidebar-package>span{color:#79a496;font-size:8px;font-weight:900;letter-spacing:1.6px}
.hr-report-page .hr-package-status{margin-top:20px;display:flex;align-items:center;justify-content:space-between}
.hr-report-page .hr-package-status div:first-child{display:flex;flex-direction:column}
.hr-report-page .hr-package-status strong{color:#fff;font-size:16px}
.hr-report-page .hr-package-status small{margin-top:6px;color:#7da699;font-size:9px}
.hr-report-page .hr-package-dot{width:11px;height:11px;border-radius:50%;background:#d4aa37;box-shadow:0 0 0 7px rgba(212,170,55,.1)}
.hr-report-page .hr-sidebar-bottom{margin-top:auto;padding-top:30px;border-top:1px solid rgba(255,255,255,.1)}
.hr-report-page .hr-sidebar-bottom span{color:#d4aa37;font-size:9px;font-weight:900;letter-spacing:1.5px}
.hr-report-page .hr-sidebar-bottom p{margin-top:8px;color:#71988b;font-size:9px}

.hr-report-main{width:calc(100% - 280px);min-height:100vh;margin-left:280px;padding:55px 55px 90px}
.hr-report-header{display:flex;align-items:flex-start;justify-content:space-between;gap:35px}
.hr-report-header>div{max-width:760px}
.hr-report-header .hr-header-label{display:block;color:#b88b17;font-size:10px;font-weight:900;letter-spacing:2px}
.hr-report-header h1{margin-top:13px;color:#173c32;font-size:clamp(40px,4vw,62px);line-height:1.05}
.hr-report-header h1 span{color:#c99b1f}
.hr-report-header p{max-width:650px;margin-top:18px;color:#71807b;font-size:14px;line-height:1.75}
.hr-report-back{flex-shrink:0;min-height:44px;padding:0 18px;display:flex;align-items:center;justify-content:center;border:1px solid #dce5e1;border-radius:8px;background:#fff;color:#173c32;text-decoration:none;font-size:11px;font-weight:800}

.hr-report-filter{margin-top:42px;padding:25px 28px;display:flex;align-items:center;justify-content:space-between;gap:25px;background:#fff;border:1px solid #e0e8e5;border-radius:14px}
.hr-report-filter-heading span,.hr-report-section-heading>div>span{display:block;color:#b88b17;font-size:9px;font-weight:900;letter-spacing:1.7px}
.hr-report-filter-heading h2{margin-top:8px;color:#173c32;font-size:23px}
.hr-report-filter-control select{min-width:260px;padding:13px 42px 13px 15px;border:1px solid #dce5e1;border-radius:8px;outline:none;background:#fbfcfc;color:#173c32;font-size:12px}

.hr-report-stat-grid{margin-top:22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.hr-report-stat-card{min-width:0;min-height:145px;padding:27px 28px;display:flex;flex-direction:column;justify-content:center;background:#fff;border:1px solid #e0e8e5;border-radius:14px}
.hr-report-stat-card>span{color:#899792;font-size:8px;font-weight:900;letter-spacing:1.4px}
.hr-report-stat-card strong{margin-top:12px;color:#173c32;font-size:25px;line-height:1.25;overflow-wrap:anywhere}
.hr-report-stat-card p{margin-top:8px;color:#7d8c87;font-size:11px}
.hr-report-stat-card.highlight{background:#173c32;border-color:#173c32}
.hr-report-stat-card.highlight>span,.hr-report-stat-card.highlight strong{color:#d4aa37}
.hr-report-stat-card.highlight p{color:#a9bdb6}

.hr-report-section{margin-top:25px;padding:40px;background:#fff;border:1px solid #e0e8e5;border-radius:18px}
.hr-report-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:25px}
.hr-report-section-heading h2{margin-top:10px;color:#173c32;font-size:29px}
.hr-report-section-heading p{max-width:650px;margin-top:10px;color:#71807b;font-size:12px;line-height:1.7}
.hr-report-premium-badge{padding:9px 13px;border-radius:50px;background:#fff7df;color:#a77c0e;font-size:8px;font-weight:900;letter-spacing:1.3px}

.hr-character-report-layout{margin-top:35px;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,.75fr);gap:45px;align-items:stretch}
.hr-character-chart{display:flex;flex-direction:column;justify-content:center;gap:23px}
.hr-chart-row{display:grid;grid-template-columns:220px minmax(120px,1fr) 55px;align-items:center;gap:20px}
.hr-chart-info strong{display:block;color:#173c32;font-size:13px;line-height:1.4}
.hr-chart-info span{display:block;margin-top:4px;color:#899792;font-size:10px}
.hr-chart-track{width:100%;height:14px;overflow:hidden;border-radius:50px;background:#e8efec}
.hr-chart-bar{width:0;height:100%;border-radius:inherit;transition:width .5s;background:#173c32}
.hr-chart-bar.owl-bar{background:#315e50}.hr-chart-bar.lion-bar{background:#c99b1f}.hr-chart-bar.cat-bar{background:#4f89c2}.hr-chart-bar.dolphin-bar{background:#d45a56}
.hr-chart-percent{color:#173c32;font-size:14px;text-align:right}
.hr-character-summary{padding:30px;display:flex;flex-direction:column;justify-content:center;border-radius:14px;background:#f7f9f8;border:1px solid #e2e9e6}
.hr-character-summary>span{color:#899792;font-size:8px;font-weight:900;letter-spacing:1.5px}
.hr-character-summary h3{margin-top:12px;color:#173c32;font-size:24px;line-height:1.25}
.hr-character-summary p{margin-top:13px;color:#60716b;font-size:12px;line-height:1.65}
.hr-character-summary-number{margin-top:25px;padding-top:20px;border-top:1px solid #dce5e1}
.hr-character-summary-number strong{display:block;color:#c29418;font-size:30px}
.hr-character-summary-number span{display:block;margin-top:5px;color:#899792;font-size:10px}

.hr-axis-report-grid{margin-top:30px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.hr-axis-report-card{min-width:0;padding:25px;background:#f9fbfa;border:1px solid #e0e8e5;border-radius:12px}
.hr-axis-report-top{display:flex;align-items:center;justify-content:space-between;gap:15px}
.hr-axis-report-top span{color:#899792;font-size:8px;font-weight:900;letter-spacing:1.3px}
.hr-axis-report-top strong{color:#173c32;font-size:18px}
.hr-axis-progress{width:100%;height:7px;margin-top:18px;overflow:hidden;border-radius:50px;background:#e5ece9}
.hr-axis-progress>div{width:0;height:100%;border-radius:inherit;background:#c99b1f;transition:width .5s}
.hr-axis-report-card p{margin-top:17px;color:#71807b;font-size:11px;line-height:1.6}

.hr-report-page .hr-candidate-table-wrapper{margin-top:28px;overflow-x:auto;background:#fff;border:1px solid #e0e8e5;border-radius:13px}
.hr-report-page .hr-candidate-table{width:100%;min-width:760px;border-collapse:collapse}
.hr-report-page .hr-candidate-table th{padding:18px 20px;border-bottom:1px solid #e5ebe9;color:#8b9994;font-size:8px;font-weight:900;letter-spacing:1.3px;text-align:left}
.hr-report-page .hr-candidate-table td{padding:18px 20px;border-bottom:1px solid #edf1ef;color:#53665f;font-size:11px;vertical-align:middle}
.hr-report-page .hr-candidate-table tbody tr:last-child td{border-bottom:none}
.hr-report-page .candidate-detail-button{padding:9px 14px;border:1px solid #dce5e1;border-radius:7px;background:#fff;color:#173c32;font-size:9px;font-weight:800;cursor:pointer}

@media(max-width:1180px){
.hr-report-main{padding:45px 35px 75px}
.hr-report-stat-grid,.hr-axis-report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.hr-character-report-layout{grid-template-columns:1fr}
}
@media(max-width:900px){
.hr-report-page .hr-sidebar{position:relative;width:100%;height:auto;min-height:0;padding:25px 22px}
.hr-report-page .hr-sidebar-menu{margin-top:25px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.hr-report-page .hr-sidebar-package,.hr-report-page .hr-sidebar-bottom{display:none}
.hr-report-main{width:100%;margin-left:0}
}
@media(max-width:650px){
.hr-report-main{padding:35px 15px 65px}
.hr-report-header,.hr-report-filter,.hr-report-section-heading{flex-direction:column}
.hr-report-header h1{font-size:38px}
.hr-report-back{width:100%}
.hr-report-filter-control,.hr-report-filter-control select{width:100%;min-width:0}
.hr-report-stat-grid,.hr-axis-report-grid{grid-template-columns:1fr}
.hr-report-section{padding:28px 20px}
.hr-chart-row{grid-template-columns:1fr 50px;gap:9px 12px}
.hr-chart-info{grid-column:1/-1}.hr-chart-track{grid-column:1}.hr-chart-percent{grid-column:2}
.hr-report-page .hr-sidebar-menu{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* =========================================
   FINAL FIX - CARD KIRI KANAN SAMA TINGGI
========================================= */

.composition-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(380px, 1fr);
    gap: 32px;
    align-items: stretch;
}


/* KOLOM KIRI DAN KANAN */

.composition-dashboard-left,
.composition-dashboard-right {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


/* CARD KIRI */

.composition-card {
    flex: 1;
}


/* CARD KANAN */

.composition-dashboard-right {
    height: 100%;
}


/* DIAGRAM */

.mini-bar-chart {
    flex: 1;
    height: auto;
    min-height: 0;
    position: relative;
}


/* KEMBALIKAN AREA GRID */

.mini-chart-grid {
    position: absolute;
    inset: 0;
}


/* AREA BATANG */

.mini-chart-bars {
    position: absolute;

    top: 0;
    left: 45px;
    right: 0;
    bottom: 0;

    height: 100%;
}


/* AREA BATANG PER KARAKTER */

.mini-bar-area {
    height: calc(100% - 110px);
}


/* RESPONSIVE */

@media (max-width: 1000px) {

    .composition-dashboard {
        grid-template-columns: 1fr;
    }


    .composition-dashboard-left,
    .composition-dashboard-right {
        height: auto;
    }


    .mini-bar-chart {
        min-height: 600px;
    }

}
/* =========================================
   FINAL POSITION DIAGRAM BATANG
========================================= */

.composition-dashboard-right .mini-bar-chart {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}


/* GARIS GRAFIK */

.composition-dashboard-right .mini-chart-grid {
    position: absolute;

    top: 45px;
    left: 0;
    right: 0;
    bottom: 45px;

    height: auto;
}


/* BATANG + FOTO */

.composition-dashboard-right .mini-chart-bars {
    position: absolute;

    top: 45px;
    left: 45px;
    right: 0;
    bottom: 45px;

    height: auto;

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

    align-items: stretch;
}


/* SETIAP KOLOM */

.composition-dashboard-right .mini-character-column {
    height: 100%;

    display: flex;
    flex-direction: column;

    justify-content: flex-end;
}


/* AREA PERSENTASE + BATANG */

.composition-dashboard-right .mini-bar-area {
    flex: 1;
    width: 100%;
    height: auto;

    position: relative;
}


/* BATANG MULAI DARI BAWAH */

.composition-dashboard-right .mini-character-bar {
    position: absolute;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    width: 54px;
}


/* ANGKA PERSENTASE */

.composition-dashboard-right
.mini-bar-area > strong {

    position: absolute;

    left: 50%;

    transform: translate(
        -50%,
        -10px
    );

    white-space: nowrap;
}


/* FOTO + NAMA */

.composition-dashboard-right
.mini-character-footer {

    flex: 0 0 90px;

    display: flex;
    flex-direction: column;

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

    padding-top: 12px;
}
/* =========================================
   FINAL FIX GRID + INDIKATOR DIAGRAM
========================================= */

.composition-dashboard-right .mini-bar-chart {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}


/* =========================================
   GRID 100 / 75 / 50 / 25 / 0
========================================= */

.composition-dashboard-right .mini-chart-grid {
    position: absolute;

    top: 45px;
    left: 0;
    right: 0;
    bottom: 45px;

    height: auto;

    display: grid;
    grid-template-rows: repeat(5, 1fr);

    z-index: 1;

    pointer-events: none;
}


.composition-dashboard-right .mini-grid-line {
    position: relative;

    width: 100%;
    height: auto;

    display: block;

    background: transparent;
}


.composition-dashboard-right .mini-grid-line::after {
    content: "";

    position: absolute;

    left: 45px;
    right: 0;
    top: 0;

    height: 1px;

    background: #d8e3df;
}


.composition-dashboard-right .mini-grid-line span {
    position: absolute;

    left: 0;
    top: 0;

    transform: translateY(-50%);

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

    color: #71837d;

    line-height: 1;

    white-space: nowrap;
}


/* GARIS PALING BAWAH */

.composition-dashboard-right
.mini-grid-line:last-child {

    align-self: end;
}


.composition-dashboard-right
.mini-grid-line:last-child::after {

    top: auto;
    bottom: 0;
}


.composition-dashboard-right
.mini-grid-line:last-child span {

    top: auto;
    bottom: 0;

    transform: translateY(50%);
}


/* =========================================
   AREA BATANG
========================================= */

.composition-dashboard-right .mini-chart-bars {
    position: absolute;

    top: 45px;
    left: 45px;
    right: 0;
    bottom: 45px;

    height: auto;

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

    align-items: stretch;

    z-index: 2;
}


.composition-dashboard-right .mini-character-column {
    height: 100%;

    display: flex;
    flex-direction: column;

    justify-content: flex-end;
}


.composition-dashboard-right .mini-bar-area {
    flex: 1;

    width: 100%;
    height: auto;

    position: relative;
}


.composition-dashboard-right .mini-character-bar {
    position: absolute;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    width: 54px;
}


.composition-dashboard-right
.mini-bar-area > strong {

    position: absolute;

    left: 50%;

    transform:
        translate(-50%, -10px);

    white-space: nowrap;
}


/* =========================================
   FOTO + NAMA
========================================= */

.composition-dashboard-right
.mini-character-footer {

    flex: 0 0 90px;

    display: flex;
    flex-direction: column;

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

    padding-top: 12px;
}

/* =========================================
   FINAL FIX - MINI BAR CHART BASELINE 0%
========================================= */

.composition-dashboard-right .mini-bar-chart {
    --mini-chart-left: 38px;
    --mini-chart-plot-height: 355px;
    position: relative;
    height: 430px;
    margin-top: 30px;
    padding-left: var(--mini-chart-left);
}

.composition-dashboard-right .mini-chart-grid {
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: var(--mini-chart-left);
    height: var(--mini-chart-plot-height);
}

.composition-dashboard-right .mini-grid-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: #e3ebe7;
}

.composition-dashboard-right .mini-grid-line span {
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    color: #8b9994;
    font-size: 7px;
    font-weight: 700;
}

.composition-dashboard-right .mini-grid-100 { top: 0; }
.composition-dashboard-right .mini-grid-75 { top: 25%; }
.composition-dashboard-right .mini-grid-50 { top: 50%; }
.composition-dashboard-right .mini-grid-25 { top: 75%; }

.composition-dashboard-right .mini-grid-0 {
    top: 100%;
    bottom: auto;
}

.composition-dashboard-right .mini-chart-bars {
    position: relative;
    z-index: 2;
    height: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.composition-dashboard-right .mini-chart-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.composition-dashboard-right .mini-bar-area {
    position: relative;
    width: 100%;
    height: var(--mini-chart-plot-height);
    flex: 0 0 var(--mini-chart-plot-height);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.composition-dashboard-right .mini-bar-area > strong {
    position: absolute;
    bottom: 0;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    transition: bottom 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.composition-dashboard-right .mini-character-bar {
    width: 44px;
    height: 0;
    flex: 0 0 auto;
    align-self: flex-end;
    border-radius: 9px 9px 3px 3px;
    transition: height 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.composition-dashboard-right .mini-character-logo {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    margin-top: 10px;
}

.composition-dashboard-right .mini-chart-column > small {
    margin-top: 7px;
}

@media (max-width: 600px) {
    .composition-dashboard-right .mini-bar-chart {
        --mini-chart-left: 30px;
        --mini-chart-plot-height: 320px;
        height: 390px;
        padding-left: var(--mini-chart-left);
    }

    .composition-dashboard-right .mini-character-bar {
        width: 30px;
    }
}
/* =========================================
   FIX FINAL DIAGRAM - 4 KOLOM TIDAK KE POTONG
========================================= */

.composition-dashboard-right .mini-bar-chart {
    --chart-axis-width: 42px;
    --chart-height: 355px;

    position: relative;

    width: 100%;
    height: 430px;

    margin-top: 30px;
    padding: 0;

    overflow: visible;
}


/* =========================================
   GRID / GARIS INDIKATOR
========================================= */

.composition-dashboard-right .mini-chart-grid {
    position: absolute;

    top: 0;
    left: var(--chart-axis-width);
    right: 0;

    width: auto;
    height: var(--chart-height);

    display: block;

    pointer-events: none;
}


.composition-dashboard-right .mini-grid-line {
    position: absolute;

    left: 0;
    right: 0;

    width: 100%;
    height: 1px;

    background: #d8e3df;
}


.composition-dashboard-right .mini-grid-line::after {
    display: none;
}


.composition-dashboard-right .mini-grid-line span {
    position: absolute;

    right: calc(100% + 10px);
    left: auto;

    top: 50%;

    transform: translateY(-50%);

    color: #71837d;

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

    white-space: nowrap;
}


.composition-dashboard-right .mini-grid-100 {
    top: 0;
}


.composition-dashboard-right .mini-grid-75 {
    top: 25%;
}


.composition-dashboard-right .mini-grid-50 {
    top: 50%;
}


.composition-dashboard-right .mini-grid-25 {
    top: 75%;
}


.composition-dashboard-right .mini-grid-0 {
    top: 100%;
    bottom: auto;
}


/* =========================================
   AREA SEMUA BATANG
========================================= */

.composition-dashboard-right .mini-chart-bars {
    position: absolute;

    top: 0;
    left: var(--chart-axis-width);
    right: 0;
    bottom: auto;

    width: auto;
    height: auto;

    display: grid;

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

    gap: 8px;

    align-items: start;

    overflow: visible;
}


/* =========================================
   SETIAP KOLOM
========================================= */

.composition-dashboard-right .mini-chart-column,
.composition-dashboard-right .mini-character-column {
    min-width: 0;
    width: 100%;
    height: auto;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: flex-start;
}


/* =========================================
   AREA BATANG
========================================= */

.composition-dashboard-right .mini-bar-area {
    position: relative;

    width: 100%;
    height: var(--chart-height);

    flex: none;

    display: flex;

    align-items: flex-end;
    justify-content: center;
}


/* =========================================
   BATANG
========================================= */

.composition-dashboard-right .mini-character-bar {
    position: relative;

    left: auto;
    bottom: auto;

    transform: none;

    width: 44px;
    height: 0;

    flex: none;
    align-self: auto;

    border-radius:
        9px
        9px
        3px
        3px;

    transition:
        height 1.2s
        cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================
   ANGKA PERSENTASE
========================================= */

.composition-dashboard-right
.mini-bar-area > strong {

    position: absolute;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    margin: 0 0 10px;

    font-size: 14px;
    font-weight: 900;

    line-height: 1;

    white-space: nowrap;

    transition:
        bottom 1.2s
        cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================
   FOTO
========================================= */

.composition-dashboard-right .mini-character-logo {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    margin-top: 10px;

    overflow: hidden;

    border: 3px solid #ffffff;
    border-radius: 50%;
}


/* =========================================
   NAMA
========================================= */

.composition-dashboard-right
.mini-chart-column > small,

.composition-dashboard-right
.mini-character-column > small {

    margin-top: 7px;

    color: #73847e;

    font-size: 6px;
    font-weight: 900;

    letter-spacing: 1px;

    text-align: center;

    white-space: nowrap;
}


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

@media (max-width: 600px) {

    .composition-dashboard-right .mini-bar-chart {
        --chart-axis-width: 34px;
        --chart-height: 320px;

        height: 390px;
    }


    .composition-dashboard-right
    .mini-chart-bars {

        gap: 4px;
    }


    .composition-dashboard-right
    .mini-character-bar {

        width: 30px;
    }


    .composition-dashboard-right
    .mini-character-logo {

        width: 36px;
        height: 36px;

        flex-basis: 36px;
    }

}
/* =========================================
   FINAL ALIGN + BESARKAN DIAGRAM
========================================= */

.composition-dashboard {
    align-items: stretch;
}


/* CARD KANAN */

.composition-dashboard-right {
    display: flex;
    flex-direction: column;

    padding:
        30px
        22px
        25px;

    height: 100%;
}


/* JUDUL */

.composition-dashboard-right
.composition-dashboard-title {

    flex: 0 0 auto;
}


/* DIAGRAM */

.composition-dashboard-right
.mini-bar-chart {

    --chart-axis-width: 42px;
    --chart-height: 390px;

    width: 100%;
    height: 465px;

    flex: 1;

    margin-top: 30px;

    position: relative;
}


/* GARIS */

.composition-dashboard-right
.mini-chart-grid {

    left: var(--chart-axis-width);

    height:
        var(--chart-height);
}


/* AREA BATANG */

.composition-dashboard-right
.mini-chart-bars {

    left:
        var(--chart-axis-width);

    width:
        calc(
            100% -
            var(--chart-axis-width)
        );

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

    gap: 5px;
}


/* TINGGI AREA BATANG */

.composition-dashboard-right
.mini-bar-area {

    height:
        var(--chart-height);
}


/* BATANG LEBIH BESAR */

.composition-dashboard-right
.mini-character-bar {

    width: 50px;
}


/* FOTO LEBIH BESAR */

.composition-dashboard-right
.mini-character-logo {

    width: 46px;
    height: 46px;

    flex-basis: 46px;

    margin-top: 12px;
}


/* ANGKA */

.composition-dashboard-right
.mini-bar-area > strong {

    font-size: 15px;

    margin-bottom: 11px;
}


/* NAMA */

.composition-dashboard-right
.mini-chart-column > small,

.composition-dashboard-right
.mini-character-column > small {

    margin-top: 8px;

    font-size: 6.5px;

    letter-spacing: 1.2px;
}


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

@media (max-width: 600px) {

    .composition-dashboard-right
    .mini-bar-chart {

        --chart-axis-width: 34px;
        --chart-height: 330px;

        height: 405px;
    }


    .composition-dashboard-right
    .mini-character-bar {

        width: 34px;
    }


    .composition-dashboard-right
    .mini-character-logo {

        width: 38px;
        height: 38px;

        flex-basis: 38px;
    }

}
/* =========================================
   FINAL SCALE + ALIGN CHART
========================================= */

.composition-dashboard-right {
    padding: 30px;
}


/* DIAGRAM LEBIH BESAR */

.composition-dashboard-right .mini-bar-chart {
    --chart-axis-width: 46px;
    --chart-height: 520px;

    width: 100%;
    height: 610px;

    margin-top: 45px;
}


/* GRID */

.composition-dashboard-right .mini-chart-grid {
    left: var(--chart-axis-width);
    right: 0;

    width: auto;
    height: var(--chart-height);
}


/* AREA 4 BATANG */

.composition-dashboard-right .mini-chart-bars {
    left: var(--chart-axis-width);
    right: 0;

    width: auto;

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

    gap: 10px;
}


/* AREA TINGGI BATANG */

.composition-dashboard-right .mini-bar-area {
    width: 100%;
    height: var(--chart-height);
}


/* BATANG DIBESARKAN */

.composition-dashboard-right .mini-character-bar {
    width: 58px;

    border-radius:
        10px
        10px
        3px
        3px;
}


/* ANGKA PERSENTASE */

.composition-dashboard-right .mini-bar-area > strong {
    font-size: 17px;
    margin-bottom: 12px;
}


/* FOTO */

.composition-dashboard-right .mini-character-logo {
    width: 52px;
    height: 52px;

    flex-basis: 52px;

    margin-top: 14px;
}


/* NAMA */

.composition-dashboard-right .mini-chart-column > small,
.composition-dashboard-right .mini-character-column > small {
    margin-top: 9px;

    font-size: 7px;
    letter-spacing: 1.3px;
}


/* RESPONSIVE */

@media (max-width: 600px) {

    .composition-dashboard-right .mini-bar-chart {
        --chart-axis-width: 35px;
        --chart-height: 360px;

        height: 440px;
        margin-top: 30px;
    }

    .composition-dashboard-right .mini-character-bar {
        width: 36px;
    }

    .composition-dashboard-right .mini-character-logo {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }
}
/* =========================================
   JARAK PETA KECENDERUNGAN
========================================= */

.result-axis-section {
    margin-top: 80px !important;
}
/* =========================================
   FINAL FIX ANGKA CANDIDATE DIAGRAM
========================================= */

.candidate-composition-right
.candidate-mini-bar-area {
    position: relative !important;
    overflow: visible !important;
}


/* ANGKA PERSENTASE */

.candidate-composition-right
.candidate-mini-bar-area > strong {
    position: absolute !important;

    left: 50% !important;

    margin: 0 !important;

    transform:
        translate(-50%, -16px) !important;

    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    white-space: nowrap !important;

    z-index: 999 !important;

    pointer-events: none !important;
}


/* BATANG */

.candidate-composition-right
.candidate-mini-bar {
    position: absolute !important;

    left: 50% !important;
    bottom: 0 !important;

    transform:
        translateX(-50%) !important;

    z-index: 2 !important;
}


/* PASTIKAN CHART TIDAK MOTONG ANGKA */

.candidate-composition-right
.candidate-mini-chart,

.candidate-composition-right
.candidate-mini-bars,

.candidate-composition-right
.candidate-mini-column {
    overflow: visible !important;
}
/* =========================================
   FIX FINAL ANGKA DI ATAS BATANG CANDIDATE
========================================= */

.candidate-mini-bar-area {
    position: relative !important;

    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;

    overflow: visible !important;
}


/* BATANG */

.candidate-mini-bar {
    position: relative !important;

    left: auto !important;
    bottom: auto !important;

    transform: none !important;

    z-index: 2 !important;
}


/* ANGKA PERSENTASE */

.candidate-mini-bar-area > strong {
    position: absolute !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

    margin: 0 !important;

    z-index: 20 !important;

    font-size: 17px !important;
    font-weight: 900 !important;

    line-height: 1 !important;

    white-space: nowrap !important;

    pointer-events: none !important;
}


/* =========================================
   POSISI ANGKA MANUAL SESUAI KOLOM
========================================= */

.candidate-mini-column:nth-child(1)
.candidate-mini-bar-area > strong {
    bottom: calc(60% + 12px) !important;
}


.candidate-mini-column:nth-child(2)
.candidate-mini-bar-area > strong {
    bottom: calc(30% + 12px) !important;
}


.candidate-mini-column:nth-child(3)
.candidate-mini-bar-area > strong {
    bottom: calc(70% + 12px) !important;
}


.candidate-mini-column:nth-child(4)
.candidate-mini-bar-area > strong {
    bottom: calc(40% + 12px) !important;
}


/* PASTIKAN TIDAK KE POTONG */

.candidate-mini-chart,
.candidate-mini-bars,
.candidate-mini-column {
    overflow: visible !important;
}
/* =========================================
   FINAL CANDIDATE AXIS / DUA SUMBU KARAKTER
========================================= */

.candidate-axis-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    margin-top: 38px !important;
}

.candidate-axis-card {
    position: relative !important;

    padding: 42px 44px 40px !important;

    border: 1px solid #dbe5e1 !important;
    border-radius: 20px !important;

    background: #ffffff !important;

    overflow: hidden !important;
}

.candidate-axis-card > span {
    display: block !important;

    margin-bottom: 18px !important;

    color: #c79200 !important;

    font-size: 10px !important;
    font-weight: 900 !important;

    letter-spacing: 2px !important;
}

.candidate-axis-card h3 {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    margin: 0 !important;

    color: #0c3b31 !important;

    font-size: 23px !important;
    font-weight: 800 !important;
}

.candidate-axis-card h3 small {
    color: #91a09b !important;

    font-size: 11px !important;
    font-weight: 800 !important;

    text-transform: uppercase !important;
}

.candidate-axis-value {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        42px
        minmax(0, 1fr) !important;

    align-items: center !important;

    margin-top: 38px !important;
    margin-bottom: 20px !important;
}

.candidate-axis-value strong {
    color: #0c3b31 !important;

    font-size: 31px !important;
    font-weight: 900 !important;

    line-height: 1 !important;
}

.candidate-axis-value strong:first-child {
    text-align: left !important;
}

.candidate-axis-value strong:last-child {
    text-align: right !important;
}

.candidate-axis-vs {
    width: 34px !important;
    height: 34px !important;

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

    justify-self: center !important;

    border: 1px solid #d9e4df !important;
    border-radius: 50% !important;

    background: #f4f8f6 !important;

    color: #c79200 !important;

    font-size: 8px !important;
    font-weight: 900 !important;

    letter-spacing: 0 !important;
}

.candidate-axis-track {
    position: relative !important;

    width: 100% !important;
    height: 12px !important;

    display: flex !important;

    border-radius: 999px !important;

    background: #e7eeeb !important;

    overflow: hidden !important;
}

.candidate-axis-left,
.candidate-axis-right {
    position: relative !important;

    height: 100% !important;

    flex: none !important;

    transition:
        width 1.2s
        cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.candidate-axis-left {
    background: #d19a0b !important;
}

.candidate-axis-right {
    background: #123f35 !important;
}

.candidate-axis-left:first-child {
    border-radius: 999px 0 0 999px !important;
}

.candidate-axis-right:last-child {
    border-radius: 0 999px 999px 0 !important;
}

@media (max-width: 900px) {
    .candidate-axis-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 600px) {
    .candidate-axis-card {
        padding: 30px 24px !important;
    }

    .candidate-axis-card h3 {
        font-size: 19px !important;
        gap: 8px !important;
    }

    .candidate-axis-value strong {
        font-size: 26px !important;
    }
}
/* =========================================
   FINAL NAMA DUA SUMBU KARAKTER
========================================= */

.candidate-axis-card .candidate-axis-names {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr !important;

    align-items: center !important;

    gap: 60px !important;

    margin: 0 !important;
}


.candidate-axis-card .candidate-axis-names strong {
    display: block !important;

    color: #0c3b31 !important;

    font-size: 23px !important;
    font-weight: 800 !important;

    line-height: 1.2 !important;

    white-space: nowrap !important;
}


.candidate-axis-card
.candidate-axis-names strong:first-child {
    text-align: left !important;
}


.candidate-axis-card
.candidate-axis-names strong:last-child {
    text-align: right !important;
}


/* =========================================
   SAMAKAN POSISI NAMA DENGAN ANGKA
========================================= */

.candidate-axis-card .candidate-axis-value {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        1fr
        50px
        1fr !important;

    align-items: center !important;

    margin-top: 45px !important;
}


.candidate-axis-card
.candidate-axis-value strong:first-child {
    text-align: left !important;
}


.candidate-axis-card
.candidate-axis-value strong:last-child {
    text-align: right !important;
}


.candidate-axis-vs {
    justify-self: center !important;
}


/* MOBILE */

@media (max-width: 600px) {

    .candidate-axis-card .candidate-axis-names {
        gap: 20px !important;
    }

    .candidate-axis-card .candidate-axis-names strong {
        font-size: 17px !important;
        white-space: normal !important;
    }

}/* =========================================
   HARD FIX AXIS NAMES ALIGNMENT
   TARUH PALING BAWAH STYLE.CSS
========================================= */

.candidate-axis-card h3.candidate-axis-names {
    width: 100% !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


.candidate-axis-card h3.candidate-axis-names > strong {
    display: block !important;

    width: auto !important;
    max-width: 45% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #0c3b31 !important;

    font-size: 23px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;

    white-space: nowrap !important;
}


.candidate-axis-card
h3.candidate-axis-names
> strong:first-child {
    margin-right: auto !important;
    text-align: left !important;
}


.candidate-axis-card
h3.candidate-axis-names
> strong:last-child {
    margin-left: auto !important;
    text-align: right !important;
}


/* ANGKA IKUT SEJAJAR */

.candidate-axis-card .candidate-axis-value {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        1fr
        50px
        1fr !important;

    align-items: center !important;

    margin-top: 44px !important;
}


.candidate-axis-card
.candidate-axis-value > strong:first-child {
    justify-self: start !important;
    text-align: left !important;
}


.candidate-axis-card
.candidate-axis-value > strong:last-child {
    justify-self: end !important;
    text-align: right !important;
}


.candidate-axis-card
.candidate-axis-value
.candidate-axis-vs {
    justify-self: center !important;
}


/* MOBILE */

@media (max-width: 600px) {

    .candidate-axis-card
    h3.candidate-axis-names
    > strong {

        max-width: 42% !important;

        font-size: 17px !important;

        white-space: normal !important;
    }

}/* =========================================
   FINAL RESULT AXIS CHARACTER NAMES
========================================= */

.axis-card h3.axis-character-names {
    width: 100% !important;

    display: flex !important;
    flex-direction: row !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


.axis-card
h3.axis-character-names
> strong {
    display: block !important;

    width: auto !important;
    max-width: 45% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #0c3b31 !important;

    font-size: 23px !important;
    font-weight: 800 !important;

    line-height: 1.2 !important;

    white-space: nowrap !important;
}


.axis-card
h3.axis-character-names
> strong:first-child {
    margin-right: auto !important;

    text-align: left !important;
}


.axis-card
h3.axis-character-names
> strong:last-child {
    margin-left: auto !important;

    text-align: right !important;
}


/* =========================================
   AXIS VALUE
========================================= */

.axis-card .axis-value {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        1fr
        50px
        1fr !important;

    align-items: center !important;

    margin-top: 44px !important;
}


.axis-card
.axis-value-side:first-child {
    justify-self: start !important;

    text-align: left !important;
}


.axis-card
.axis-value-side:last-child {
    justify-self: end !important;

    text-align: right !important;
}


.axis-card .axis-versus {
    width: 40px !important;
    height: 40px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    justify-self: center !important;

    border: 1px solid #d9e4df !important;
    border-radius: 50% !important;

    background: #f4f8f6 !important;

    color: #c79200 !important;

    font-size: 9px !important;
    font-weight: 900 !important;

    line-height: 1 !important;

    text-transform: uppercase !important;
}


/* =========================================
   AXIS TRACK
========================================= */

.axis-card .axis-track {
    position: relative !important;

    width: 100% !important;
    height: 12px !important;

    display: flex !important;

    margin-top: 22px !important;

    border-radius: 999px !important;

    background: #e7eeeb !important;

    overflow: hidden !important;
}


.axis-card .axis-left,
.axis-card .axis-right {
    height: 100% !important;

    flex: none !important;
}


.axis-card .axis-left {
    background: #d19a0b !important;
}


.axis-card .axis-right {
    background: #123f35 !important;
}


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

@media (max-width: 600px) {

    .axis-card
    h3.axis-character-names
    > strong {
        max-width: 42% !important;

        font-size: 17px !important;

        white-space: normal !important;
    }


    .axis-card .axis-value {
        grid-template-columns:
            1fr
            44px
            1fr !important;

        margin-top: 34px !important;
    }


    .axis-card .axis-versus {
        width: 34px !important;
        height: 34px !important;
    }

}/* =========================================
   PREMIUM PDF ACTION
========================================= */

.full-result-action-buttons {
    width: 100%;

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

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 28px;
}


.premium-pdf-button {
    min-width: 220px;

    padding:
        15px
        24px;

    border: 0;
    border-radius: 10px;

    background: #c79200;

    color: #ffffff;

    font-family: inherit;

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

    cursor: pointer;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


.premium-pdf-button:hover {
    transform:
        translateY(-2px);

    background: #b58600;

    box-shadow:
        0 12px 28px
        rgba(199, 146, 0, 0.22);
}


.full-result-home-button {
    min-width: 220px;

    text-align: center;
}


/* =========================================
   PRINT / PDF
========================================= */

@media print {

    @page {
        size: A4;
        margin: 12mm;
    }


    body {
        background: #ffffff !important;
    }


    .simple-navbar,
    .full-result-action {
        display: none !important;
    }


    .full-result-wrapper {
        padding:
            0
            !important;
    }


    .full-result-container {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .dominant-result-card,
    .result-character-info,
    .result-character-pair,
    .composition-dashboard,
    .axis-grid,
    .full-result-analysis-grid {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }


    .character-composition,
    .result-axis-section,
    .full-result-analysis {
        break-before: auto;
        page-break-before: auto;
    }


    * {
        -webkit-print-color-adjust:
            exact !important;

        print-color-adjust:
            exact !important;
    }

}


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

@media (max-width: 600px) {

    .full-result-action-buttons {
        flex-direction: column;
    }


    .premium-pdf-button,
    .full-result-home-button {
        width: 100%;
        min-width: 0;
    }

}/* =========================================
   HARD FIX PREMIUM PDF BUTTON
========================================= */

#downloadPremiumPdfButton:not([hidden]) {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-width: 240px !important;

    padding: 16px 28px !important;

    border: 0 !important;
    border-radius: 10px !important;

    background: #c79200 !important;

    color: #ffffff !important;

    font-family: inherit !important;

    font-size: 13px !important;
    font-weight: 800 !important;

    cursor: pointer !important;

    opacity: 1 !important;
    visibility: visible !important;
}


#downloadPremiumPdfButton[hidden] {
    display: none !important;
}
/* =========================================
   BRAND LOGO - TEAMQU
========================================= */

.brand-logo {
    display: flex;
    align-items: center;
}

.brand-logo-text {
    display: inline-flex;
    align-items: center;

    font-size: 28px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.5px;

    color: #123c32;
}

/* =========================================
   BRAND LOGO - TEAMQU
========================================= */

.brand-logo {
    display: flex;
    align-items: center;
}

.brand-logo-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 28px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.5px;

    color: #123c32;
}

.brand-logo-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0 2px;

    color: #f0b928;

    font-size: 40px;
    line-height: 30px;
    height: 28px;

    transform: translateY(-3px);

    text-shadow:
        0 1px 0 #d39b12,
        0 2px 0 #bd8500,
        0 3px 0 #9d6d00,
        0 4px 2px rgba(0, 0, 0, 0.28),
        0 7px 12px rgba(194, 148, 24, 0.30);
}

/* =========================================
   LOGO CENTER FIX
========================================= */

.brand-logo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-logo-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* =========================================
   BRAND LOGO FIX
========================================= */

.brand-logo {
    position: static;
    transform: none;

    width: auto;

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

    flex-shrink: 0;
}

.brand-logo-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 28px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.5px;

    color: #123c32;
}

.brand-logo-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0 2px;

    color: #f0b928;

    font-size: 38px;
    line-height: 28px;
    height: 28px;

    transform: translateY(-3px);

    text-shadow:
        0 1px 0 #d39b12,
        0 2px 0 #bd8500,
        0 3px 0 #9d6d00,
        0 4px 2px rgba(0, 0, 0, 0.28),
        0 7px 12px rgba(194, 148, 24, 0.30);
}

/* =========================================
   HERO TEXT FIX
========================================= */

.hero h1 {
    max-width: 760px;

    font-size: clamp(
        58px,
        5vw,
        88px
    );

    line-height: 0.96;

    letter-spacing: -2px;

    margin-bottom: 34px;
}

.hero h1 span {
    color: #d39d12;
}

.hero p {
    max-width: 720px;

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

    color: #61716c;
}


/* =========================================
   INLINE TE★MQU LOGO
========================================= */

.brand-inline {
    display: inline-flex;
    align-items: center;

    font-weight: 800;

    color: #123c32;

    letter-spacing: 0.3px;

    white-space: nowrap;
}

.brand-inline-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0 1px;

    color: #f0b928;

    font-size: 1.35em;
    line-height: 1;

    transform: translateY(-1px);

    text-shadow:
        0 1px 0 #d39b12,
        0 2px 0 #bd8500,
        0 3px 2px rgba(0, 0, 0, 0.22);
}/* =========================================
   HERO FONT SIZE FIX
========================================= */

.hero h1 {
    max-width: 720px !important;

    font-size: 62px !important;
    line-height: 1.02 !important;

    letter-spacing: -1.5px !important;

    margin-bottom: 28px !important;
}

.hero p {
    max-width: 720px !important;

    font-size: 18px !important;
    line-height: 1.65 !important;
}.brand-inline {
    display: inline-flex;
    align-items: center;

    font-weight: 800;
    color: #123c32;

    letter-spacing: 0.3px;
    white-space: nowrap;
}

.brand-inline-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0 1px;

    color: #f0b928;

    font-size: 1.35em;
    line-height: 1;

    transform: translateY(-1px);

    text-shadow:
        0 1px 0 #d39b12,
        0 2px 0 #bd8500,
        0 3px 2px rgba(0, 0, 0, 0.22);
}/* =========================================
   PARTICIPANT FORM
========================================= */

.participant-form {
    width: 100%;
    max-width: 700px;

    margin-top: 42px;

    padding: 42px 48px;

    background: #ffffff;

    border: 1px solid #d7e1dd;
    border-radius: 20px;

    box-shadow:
        0 20px 50px rgba(18, 60, 50, 0.08);

    box-sizing: border-box;
}


/* =========================================
   FIELD
========================================= */

.participant-form .form-field {
    display: flex;
    flex-direction: column;

    width: 100%;

    margin-bottom: 26px;
}


/* =========================================
   LABEL
========================================= */

.participant-form .form-field label {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 10px;

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

    color: #123c32;
}


.participant-form .optional {
    font-size: 13px;
    font-weight: 400;

    color: #8b9995;
}


/* =========================================
   INPUT
========================================= */

.participant-form input,
.participant-form select {
    display: block;

    width: 100%;
    height: 62px;

    padding: 0 20px;

    margin: 0;

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

    background: #fbfcfc;

    color: #123c32;

    font-family: inherit;
    font-size: 16px;

    outline: none;

    box-sizing: border-box;

    appearance: auto;
}


/* =========================================
   FOCUS
========================================= */

.participant-form input:focus,
.participant-form select:focus {
    border-color: #d5a018;

    background: #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(213, 160, 24, 0.12);
}


/* =========================================
   BUTTON
========================================= */

.participant-form .form-submit-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 58px;

    padding: 0 24px;

    border: 0;
    border-radius: 9px;

    background: #123c32;

    color: #ffffff;

    font-family: inherit;
    font-size: 16px;
    font-weight: 700;

    cursor: pointer;
}


.participant-form .form-submit-button:hover {
    background: #0d3028;
}


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

@media (max-width: 768px) {

    .participant-form {
        padding: 30px 24px;

        border-radius: 16px;
    }

    .participant-form input,
    .participant-form select {
        height: 56px;
    }

}/* =========================================
   PARTICIPANT FORM FINAL FIX
========================================= */

#formPeserta.participant-form {
    display: block !important;

    width: 100% !important;
    max-width: 700px !important;

    margin: 42px 0 0 !important;
    padding: 42px 48px !important;

    background: #ffffff !important;

    border: 1px solid #d7e1dd !important;
    border-radius: 20px !important;

    box-shadow:
        0 20px 50px rgba(18, 60, 50, 0.08) !important;

    box-sizing: border-box !important;
}


#formPeserta .form-field {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;

    margin: 0 0 26px !important;
}


#formPeserta .form-field label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    width: 100% !important;

    margin: 0 0 10px !important;

    font-size: 16px !important;
    font-weight: 700 !important;

    color: #123c32 !important;
}


#formPeserta .optional {
    font-size: 13px !important;
    font-weight: 400 !important;

    color: #8b9995 !important;
}


#formPeserta input,
#formPeserta select {
    display: block !important;

    width: 100% !important;
    height: 62px !important;

    margin: 0 !important;
    padding: 0 20px !important;

    border: 1px solid #d5dfdb !important;
    border-radius: 10px !important;

    background: #fbfcfc !important;

    color: #123c32 !important;

    font-family: inherit !important;
    font-size: 16px !important;

    box-sizing: border-box !important;

    outline: none !important;
}


#formPeserta input:focus,
#formPeserta select:focus {
    border-color: #d5a018 !important;

    background: #ffffff !important;

    box-shadow:
        0 0 0 3px rgba(213, 160, 24, 0.12) !important;
}


#formPeserta .form-submit-button {
    position: static !important;

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

    float: none !important;

    width: 100% !important;
    height: 58px !important;

    margin: 4px 0 0 !important;
    padding: 0 24px !important;

    border: 0 !important;
    border-radius: 9px !important;

    background: #123c32 !important;

    color: #ffffff !important;

    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 700 !important;

    cursor: pointer !important;

    box-sizing: border-box !important;
}


#formPeserta .form-submit-button:hover {
    background: #0d3028 !important;
}


/* PRIVACY */

.participant-privacy {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    width: 100%;
    max-width: 700px;

    margin-top: 26px;
}


.participant-privacy p {
    margin: 0;

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

    color: #7b8d88;
}


@media (max-width: 768px) {

    #formPeserta.participant-form {
        padding: 30px 24px !important;
    }

    #formPeserta input,
    #formPeserta select {
        height: 56px !important;
    }

    .participant-privacy {
        padding: 0 20px;

        box-sizing: border-box;
    }

}
/* =========================================
   FREE RESULT SHARE
========================================= */

.free-result-share {
    width: min(100% - 40px, 1110px);

    margin:
        42px auto
        70px;

    padding:
        30px
        34px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 30px;

    background:
        #ffffff;

    border:
        1px solid
        #dce6e2;

    border-radius:
        22px;

    box-shadow:
        0 18px 50px
        rgba(
            20,
            67,
            55,
            0.07
        );
}


/* =========================================
   COPY
========================================= */

.free-result-share-copy {
    max-width:
        560px;
}


.free-result-share-copy > span {
    display:
        block;

    margin-bottom:
        10px;

    color:
        #d59a00;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        3px;
}


.free-result-share-copy h3 {
    margin:
        0 0 8px;

    color:
        #143f34;

    font-size:
        25px;

    line-height:
        1.25;

    font-weight:
        800;
}


.free-result-share-copy p {
    margin:
        0;

    color:
        #71817c;

    font-size:
        14px;

    line-height:
        1.7;
}


/* =========================================
   ACTION
========================================= */

.free-result-share-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    flex-shrink:
        0;
}


.free-result-share-button,
.free-result-pdf-button {
    min-height:
        52px;

    padding:
        0 22px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    border-radius:
        12px;

    font-family:
        inherit;

    font-size:
        14px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        0.2s ease;
}


.free-result-share-button {
    border:
        1px solid
        #143f34;

    background:
        #143f34;

    color:
        #ffffff;
}


.free-result-pdf-button {
    border:
        1px solid
        #d8e3df;

    background:
        #ffffff;

    color:
        #143f34;
}


.free-result-share-button:hover,
.free-result-pdf-button:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 12px 25px
        rgba(
            20,
            63,
            52,
            0.12
        );
}


.free-result-share-button span,
.free-result-pdf-button span {
    font-size:
        18px;
}


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

@media (
    max-width: 768px
) {

    .free-result-share {
        width:
            min(
                100% - 28px,
                1110px
            );

        margin-top:
            28px;

        padding:
            24px;

        flex-direction:
            column;

        align-items:
            stretch;
    }


    .free-result-share-copy h3 {
        font-size:
            22px;
    }


    .free-result-share-actions {
        width:
            100%;

        flex-direction:
            column;
    }


    .free-result-share-button,
    .free-result-pdf-button {
        width:
            100%;
    }

}
/* =========================================
   FREE RESULT ACTIONS
========================================= */

.free-result-actions {
    width: min(100% - 40px, 1110px);
    margin: 32px auto 40px;
    padding: 26px 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    background: #ffffff;

    border: 1px solid #dce6e2;
    border-radius: 18px;

    box-shadow:
        0 15px 40px
        rgba(20, 63, 52, 0.07);
}


.free-result-actions-text {
    max-width: 560px;
}


.free-result-actions-text > span {
    display: block;

    margin-bottom: 8px;

    color: #d59a00;

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

    letter-spacing: 2.5px;
}


.free-result-actions-text h3 {
    margin: 0 0 7px;

    color: #143f34;

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

    font-weight: 800;
}


.free-result-actions-text p {
    margin: 0;

    color: #74847f;

    font-size: 14px;
    line-height: 1.6;
}


.free-result-actions-buttons {
    display: flex;
    align-items: center;
    gap: 12px;

    flex-shrink: 0;
}


.free-result-share-btn,
.free-result-pdf-btn {
    min-height: 50px;

    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    border-radius: 10px;

    font-family: inherit;

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

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


.free-result-share-btn {
    border: 1px solid #143f34;

    background: #143f34;

    color: #ffffff;
}


.free-result-pdf-btn {
    border: 1px solid #d6e1dd;

    background: #ffffff;

    color: #143f34;
}


.free-result-share-btn:hover,
.free-result-pdf-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 22px
        rgba(20, 63, 52, 0.12);
}


.free-result-share-btn span,
.free-result-pdf-btn span {
    font-size: 17px;
}


@media (max-width: 768px) {

    .free-result-actions {
        width: min(100% - 28px, 1110px);

        padding: 22px;

        flex-direction: column;
        align-items: stretch;
    }


    .free-result-actions-text h3 {
        font-size: 21px;
    }


    .free-result-actions-buttons {
        width: 100%;

        flex-direction: column;
    }


    .free-result-share-btn,
    .free-result-pdf-btn {
        width: 100%;
    }

}
/* =========================================
   TE★MQU PAYMENT PAGE
========================================= */

.payment-page {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(218, 237, 230, 0.8),
            transparent 35%
        ),
        #f7faf8;
    color: #123f34;
}


.teamqu-payment-wrapper {
    width: 100%;
    padding: 70px 24px 100px;
    box-sizing: border-box;
}


.teamqu-payment-container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}


/* =========================================
   HEADING
========================================= */

.teamqu-payment-heading {
    max-width: 720px;
    margin: 0 auto 55px;
    text-align: center;
}


.teamqu-payment-heading > span {
    display: block;
    margin-bottom: 15px;
    color: #cf9800;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
}


.teamqu-payment-heading h1 {
    margin: 0;
    color: #123f34;
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -2px;
}


.teamqu-payment-heading h1 strong {
    display: block;
    color: #d49c00;
    font-weight: 800;
}


.teamqu-payment-heading p {
    max-width: 620px;
    margin: 25px auto 0;
    color: #6f817b;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================
   GRID
========================================= */

.teamqu-payment-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(380px, 0.78fr);
    gap: 28px;
    align-items: stretch;
}


/* =========================================
   PRODUCT CARD
========================================= */

.teamqu-product-card {
    position: relative;
    padding: 48px;
    border-radius: 24px;
    background: #123f34;
    box-shadow:
        0 30px 70px
        rgba(18, 63, 52, 0.18);
    overflow: hidden;
}


.teamqu-product-card::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    right: -130px;
    top: -130px;
    border-radius: 50%;
    background:
        rgba(212, 156, 0, 0.12);
}


.teamqu-product-label {
    position: relative;
    z-index: 2;
    margin-bottom: 18px;
    color: #d8a313;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
}


.teamqu-product-card h2 {
    position: relative;
    z-index: 2;
    margin: 0;
    max-width: 500px;
    color: #ffffff;
    font-size: 38px;
    line-height: 1.15;
    letter-spacing: -1px;
}


.teamqu-product-description {
    position: relative;
    z-index: 2;
    max-width: 520px;
    margin: 20px 0 0;
    color: #c7d6d1;
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================
   QUESTION COUNT
========================================= */

.teamqu-question-count {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 40px 0;
    padding: 25px 0;
    border-top:
        1px solid rgba(255,255,255,0.12);
    border-bottom:
        1px solid rgba(255,255,255,0.12);
}


.teamqu-question-count > strong {
    color: #d8a313;
    font-size: 64px;
    line-height: 1;
}


.teamqu-question-count div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.teamqu-question-count span {
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}


.teamqu-question-count p {
    margin: 0;
    color: #9fb6ae;
    font-size: 13px;
}


/* =========================================
   FEATURES
========================================= */

.teamqu-payment-features {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}


.teamqu-payment-features div {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #eef6f3;
    font-size: 14px;
    line-height: 1.5;
}


.teamqu-payment-features div span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background:
        rgba(212, 156, 0, 0.15);
    color: #d8a313;
    font-size: 12px;
    font-weight: 900;
}


/* =========================================
   NOTE
========================================= */

.teamqu-product-note {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 14px;
    margin-top: 40px;
    padding: 20px;
    border-radius: 14px;
    background:
        rgba(255,255,255,0.07);
}


.teamqu-product-note > span {
    font-size: 20px;
}


.teamqu-product-note p {
    margin: 0;
    color: #b9cbc5;
    font-size: 13px;
    line-height: 1.7;
}


/* =========================================
   PAYMENT CARD
========================================= */

.teamqu-payment-card {
    padding: 42px;
    border:
        1px solid #dce7e3;
    border-radius: 24px;
    background: #ffffff;
    box-shadow:
        0 25px 60px
        rgba(22, 67, 56, 0.1);
}


.teamqu-payment-card-header > span {
    display: block;
    margin-bottom: 13px;
    color: #d19a00;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.2px;
}


.teamqu-payment-card-header h2 {
    margin: 0;
    color: #123f34;
    font-size: 30px;
}


.teamqu-payment-card-header p {
    margin: 13px 0 0;
    color: #74857f;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================
   PARTICIPANT
========================================= */

.teamqu-participant-data {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 30px;
    border:
        1px solid #e0e9e6;
    border-radius: 15px;
    overflow: hidden;
}


.teamqu-participant-data > div {
    padding: 18px 20px;
    border-bottom:
        1px solid #e6eeeb;
}


.teamqu-participant-data > div:last-child {
    border-bottom: none;
}


.teamqu-participant-data span {
    display: block;
    margin-bottom: 6px;
    color: #8a9b95;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}


.teamqu-participant-data strong {
    display: block;
    color: #123f34;
    font-size: 14px;
    overflow-wrap: anywhere;
}


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

.teamqu-order-summary {
    margin-top: 28px;
    padding: 24px;
    border-radius: 16px;
    background: #f5f8f7;
}


.teamqu-order-item,
.teamqu-order-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}


.teamqu-order-item div,
.teamqu-order-total div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.teamqu-order-item strong {
    color: #123f34;
    font-size: 14px;
}


.teamqu-order-item span {
    color: #84958f;
    font-size: 12px;
}


.teamqu-order-divider {
    height: 1px;
    margin: 22px 0;
    background: #dce6e2;
}


.teamqu-order-total span {
    color: #123f34;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}


.teamqu-order-total small {
    color: #8b9b96;
    font-size: 11px;
}


.teamqu-order-total > strong {
    color: #d19a00;
    font-size: 26px;
}


/* =========================================
   BUTTON
========================================= */

.teamqu-payment-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 25px;
    padding: 20px 24px;
    border: none;
    border-radius: 12px;
    background: #123f34;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.teamqu-payment-button span {
    font-size: 20px;
}


.teamqu-payment-button:hover {
    transform: translateY(-2px);
    background: #0d332a;
    box-shadow:
        0 15px 30px
        rgba(18, 63, 52, 0.2);
}


/* =========================================
   SECURITY
========================================= */

.teamqu-payment-security {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    margin-top: 20px;
}


.teamqu-payment-security span {
    font-size: 13px;
}


.teamqu-payment-security p {
    margin: 0;
    color: #91a19c;
    font-size: 10px;
}


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

@media (max-width: 900px) {

    .teamqu-payment-wrapper {
        padding:
            50px 18px
            70px;
    }


    .teamqu-payment-grid {
        grid-template-columns: 1fr;
    }


    .teamqu-product-card,
    .teamqu-payment-card {
        padding: 35px;
    }


    .teamqu-payment-features {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 520px) {

    .teamqu-payment-heading h1 {
        font-size: 38px;
    }


    .teamqu-product-card,
    .teamqu-payment-card {
        padding: 27px 22px;
        border-radius: 18px;
    }


    .teamqu-product-card h2 {
        font-size: 30px;
    }


    .teamqu-question-count > strong {
        font-size: 52px;
    }


    .teamqu-order-total > strong {
        font-size: 21px;
    }

}
/* =========================================
   HR CANDIDATE SYSTEM FINAL
   TE★MQU
========================================= */


/* =========================================
   ADD CANDIDATE BUTTON
========================================= */

.hr-add-candidate-button {
    min-height: 46px;

    padding:
        0 22px;

    display: inline-flex;

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

    gap: 10px;

    border: none;
    border-radius: 9px;

    outline: none;

    background:
        #173c32;

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.3px;

    cursor:
        pointer;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


.hr-add-candidate-button:hover {
    transform:
        translateY(-2px);

    background:
        #245746;

    box-shadow:
        0 14px 30px
        rgba(23, 60, 50, 0.18);
}


.hr-add-candidate-button span {
    font-size:
        17px;

    font-weight:
        400;
}


/* =========================================
   HR MODAL BASE
========================================= */

.hr-modal {
    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    padding:
        25px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    visibility:
        hidden;

    opacity:
        0;

    pointer-events:
        none;

    background:
        rgba(8, 28, 23, 0.68);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


.hr-modal.show {
    visibility:
        visible;

    opacity:
        1;

    pointer-events:
        auto;
}


/* =========================================
   MODAL CARD
========================================= */

.hr-modal-card {
    position:
        relative;

    width:
        min(100%, 560px);

    max-height:
        calc(100vh - 50px);

    overflow-y:
        auto;

    padding:
        42px;

    background:
        #ffffff;

    border:
        1px solid
        rgba(223, 232, 228, 0.9);

    border-radius:
        20px;

    box-shadow:
        0 30px 100px
        rgba(5, 24, 19, 0.28);

    transform:
        translateY(20px)
        scale(0.97);

    transition:
        transform 0.35s ease;
}


.hr-modal.show
.hr-modal-card {
    transform:
        translateY(0)
        scale(1);
}


/* =========================================
   MODAL SCROLLBAR
========================================= */

.hr-modal-card::-webkit-scrollbar {
    width:
        5px;
}


.hr-modal-card::-webkit-scrollbar-track {
    background:
        transparent;
}


.hr-modal-card::-webkit-scrollbar-thumb {
    background:
        #d6e1dd;

    border-radius:
        999px;
}


/* =========================================
   CLOSE BUTTON
========================================= */

.hr-modal-close {
    position:
        absolute;

    top:
        20px;

    right:
        20px;

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        #e0e8e5;

    border-radius:
        50%;

    outline:
        none;

    background:
        #f7faf9;

    color:
        #64736e;

    font-family:
        inherit;

    font-size:
        18px;

    cursor:
        pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


.hr-modal-close:hover {
    transform:
        rotate(90deg);

    background:
        #173c32;

    color:
        #ffffff;
}


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

.hr-modal-header {
    padding-right:
        45px;
}


.hr-modal-header > span {
    display:
        inline-block;

    color:
        #b88b17;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        1.7px;
}


.hr-modal-header h2 {
    margin-top:
        13px;

    color:
        #173c32;

    font-size:
        clamp(
            26px,
            4vw,
            35px
        );

    font-weight:
        800;

    line-height:
        1.15;

    letter-spacing:
        -1px;
}


.hr-modal-header p {
    max-width:
        420px;

    margin-top:
        13px;

    color:
        #7f8d88;

    font-size:
        12px;

    line-height:
        1.7;
}


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

.hr-modal-form {
    margin-top:
        34px;
}


.hr-modal-field {
    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

    margin-top:
        20px;
}


.hr-modal-field:first-child {
    margin-top:
        0;
}


.hr-modal-field label {
    color:
        #173c32;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.4px;
}


.hr-modal-field input,
.hr-modal-field select {
    width:
        100%;

    min-height:
        54px;

    padding:
        0 17px;

    border:
        1px solid
        #dce6e2;

    border-radius:
        9px;

    outline:
        none;

    background:
        #fafcfc;

    color:
        #173c32;

    font-family:
        inherit;

    font-size:
        13px;

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


.hr-modal-field input::placeholder {
    color:
        #a2afab;
}


.hr-modal-field input:focus,
.hr-modal-field select:focus {
    border-color:
        #2f6856;

    background:
        #ffffff;

    box-shadow:
        0 0 0 4px
        rgba(47, 104, 86, 0.1);
}


.hr-modal-field select {
    cursor:
        pointer;
}


/* =========================================
   MODAL SUBMIT
========================================= */

.hr-modal-submit {
    width:
        100%;

    min-height:
        55px;

    margin-top:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        13px;

    border:
        none;

    border-radius:
        9px;

    outline:
        none;

    background:
        #173c32;

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.4px;

    cursor:
        pointer;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


.hr-modal-submit:hover {
    transform:
        translateY(-2px);

    background:
        #245746;

    box-shadow:
        0 15px 35px
        rgba(23, 60, 50, 0.2);
}


.hr-modal-submit:disabled {
    opacity:
        0.65;

    cursor:
        wait;

    transform:
        none;

    box-shadow:
        none;
}


.hr-modal-submit span {
    font-size:
        17px;
}


/* =========================================
   CANDIDATE SUCCESS MODAL
========================================= */

.hr-candidate-success-card {
    width:
        min(100%, 510px);

    text-align:
        center;
}


.hr-success-icon {
    width:
        76px;

    height:
        76px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #edf5f1;

    border:
        1px solid
        #d9e7e1;

    border-radius:
        50%;

    color:
        #2f6856;

    font-size:
        31px;

    font-weight:
        900;
}


.hr-candidate-success-card
h2 {
    margin-top:
        25px;

    color:
        #173c32;

    font-size:
        30px;

    font-weight:
        800;

    letter-spacing:
        -0.8px;
}


.hr-candidate-success-card
> p {
    margin-top:
        12px;

    color:
        #81908b;

    font-size:
        12px;

    line-height:
        1.7;
}


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

.hr-candidate-created-summary {
    margin-top:
        27px;

    padding:
        21px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        17px;

    background:
        #f6f9f8;

    border:
        1px solid
        #e0e9e5;

    border-radius:
        13px;

    text-align:
        left;
}


.hr-candidate-created-summary
div {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


.hr-candidate-created-summary
span {
    color:
        #8b9994;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        1px;
}


.hr-candidate-created-summary
strong {
    max-width:
        260px;

    color:
        #173c32;

    font-size:
        12px;

    font-weight:
        800;

    text-align:
        right;
}


/* =========================================
   WHATSAPP BUTTON
========================================= */

.hr-whatsapp-button {
    width:
        100%;

    min-height:
        55px;

    margin-top:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    border:
        none;

    border-radius:
        9px;

    outline:
        none;

    background:
        #173c32;

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.3px;

    cursor:
        pointer;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.hr-whatsapp-button:hover {
    transform:
        translateY(-2px);

    background:
        #245746;

    box-shadow:
        0 15px 35px
        rgba(23, 60, 50, 0.2);
}


.hr-whatsapp-button span {
    font-size:
        17px;
}


/* =========================================
   FINISH CANDIDATE BUTTON
========================================= */

.hr-finish-candidate-button {
    width:
        100%;

    min-height:
        48px;

    margin-top:
        11px;

    border:
        1px solid
        #dce6e2;

    border-radius:
        9px;

    outline:
        none;

    background:
        #ffffff;

    color:
        #60706a;

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        border-color 0.25s ease,
        color 0.25s ease,
        background 0.25s ease;
}


.hr-finish-candidate-button:hover {
    border-color:
        #173c32;

    background:
        #f7faf9;

    color:
        #173c32;
}


/* =========================================
   CANDIDATE NAME TABLE
========================================= */

.hr-candidate-name {
    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;
}


.hr-candidate-name strong {
    color:
        #173c32;

    font-size:
        12px;

    font-weight:
        800;
}


.hr-candidate-name span {
    color:
        #8b9894;

    font-size:
        9px;
}


/* =========================================
   CANDIDATE STATUS
========================================= */

.hr-candidate-status {
    min-width:
        78px;

    min-height:
        27px;

    padding:
        0 11px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        999px;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        0.6px;

    text-transform:
        uppercase;
}


.hr-candidate-status.waiting {
    background:
        #fff7df;

    color:
        #9c7411;

    border:
        1px solid
        #f0dfaa;
}


.hr-candidate-status.completed {
    background:
        #eaf5ef;

    color:
        #2f6856;

    border:
        1px solid
        #cfe4da;
}


/* =========================================
   DETAIL CANDIDATE BUTTON
========================================= */

.candidate-detail-button {
    min-height:
        34px;

    padding:
        0 15px;

    border:
        1px solid
        #dce6e2;

    border-radius:
        7px;

    outline:
        none;

    background:
        #ffffff;

    color:
        #173c32;

    font-family:
        inherit;

    font-size:
        9px;

    font-weight:
        800;

    cursor:
        pointer;

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


.candidate-detail-button:hover {
    transform:
        translateY(-1px);

    border-color:
        #173c32;

    background:
        #173c32;

    color:
        #ffffff;
}


/* =========================================
   EMPTY STATE TABLE
========================================= */

.hr-candidate-table
.hr-empty-state {
    padding:
        45px 20px;

    text-align:
        center;
}


.hr-candidate-table
.hr-empty-state > span {
    color:
        #b88b17;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        1.4px;
}


.hr-candidate-table
.hr-empty-state h3 {
    margin-top:
        11px;

    color:
        #173c32;

    font-size:
        20px;
}


.hr-candidate-table
.hr-empty-state p {
    margin-top:
        8px;

    color:
        #8b9894;

    font-size:
        11px;

    line-height:
        1.6;
}


/* =========================================
   PREMIUM MODAL
========================================= */

.hr-premium-modal-card {
    width:
        min(100%, 570px);
}


.hr-premium-icon {
    width:
        70px;

    height:
        70px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #fff8e6;

    border:
        1px solid
        #ead9a2;

    border-radius:
        18px;

    color:
        #b88b17;

    font-size:
        28px;
}


.hr-premium-modal-card h2 {
    margin-top:
        25px;

    color:
        #173c32;

    font-size:
        32px;

    font-weight:
        800;

    letter-spacing:
        -1px;
}


.hr-premium-modal-card
> p {
    margin-top:
        13px;

    color:
        #7f8d88;

    font-size:
        12px;

    line-height:
        1.7;
}


.hr-premium-benefit-list {
    margin-top:
        28px;

    display:
        grid;

    gap:
        12px;
}


.hr-premium-benefit-list
div {
    min-height:
        47px;

    padding:
        0 16px;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    background:
        #f7faf9;

    border:
        1px solid
        #e0e8e5;

    border-radius:
        9px;

    color:
        #52635d;

    font-size:
        11px;

    font-weight:
        700;
}


.hr-premium-benefit-list
span {
    width:
        24px;

    height:
        24px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #e8f3ee;

    border-radius:
        50%;

    color:
        #2f6856;

    font-size:
        10px;

    font-weight:
        900;
}


.hr-premium-checkout-button {
    width:
        100%;

    min-height:
        55px;

    margin-top:
        27px;

    border:
        none;

    border-radius:
        9px;

    background:
        #173c32;

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        800;

    cursor:
        pointer;
}


.hr-stay-free-button {
    width:
        100%;

    min-height:
        46px;

    margin-top:
        10px;

    border:
        none;

    background:
        transparent;

    color:
        #7d8b86;

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        700;

    cursor:
        pointer;
}


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

@media (
    max-width: 700px
) {

    .hr-modal {
        padding:
            15px;
    }


    .hr-modal-card {
        max-height:
            calc(100vh - 30px);

        padding:
            35px 22px;
    }


    .hr-modal-close {
        top:
            15px;

        right:
            15px;
    }


    .hr-modal-header {
        padding-right:
            35px;
    }


    .hr-modal-header h2 {
        font-size:
            27px;
    }


    .hr-candidate-success-card
    h2 {
        font-size:
            25px;
    }


    .hr-candidate-created-summary
    div {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            6px;
    }


    .hr-candidate-created-summary
    strong {
        max-width:
            none;

        text-align:
            left;
    }


    .hr-premium-modal-card
    h2 {
        font-size:
            27px;
    }


    .hr-add-candidate-button {
        width:
            100%;
    }

}/* =========================================
   CANDIDATE PAGE VISIBILITY FIX
========================================= */

.candidate-hidden {
    display: none !important;
}

#candidateLoading.candidate-hidden,
#candidateError.candidate-hidden,
#candidateEntry.candidate-hidden,
#candidateCompleted.candidate-hidden {
    display: none !important;
}

/* =========================================================
   CANDIDATE ASSESSMENT PAGE - FINAL OVERRIDE
   Sinkron dengan assessment-karyawan.html versi undangan
========================================================= */

.candidate-assessment-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 8% 10%, rgba(224, 239, 233, .9), transparent 30%),
        #f7f9f8;
    color: #173c32;
}

.candidate-assessment-page .candidate-hidden {
    display: none !important;
}

.candidate-assessment-page .candidate-entry-wrapper {
    width: 100%;
    max-width: none;
    min-height: calc(100vh - 75px);
    padding: 64px 7% 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.candidate-assessment-page .candidate-entry-layout {
    width: 100%;
    max-width: 1280px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(460px, .92fr);
    gap: 72px;
    align-items: center;
}

.candidate-assessment-page .candidate-entry-intro {
    min-width: 0;
}

.candidate-assessment-page .candidate-entry-intro h1 {
    max-width: 690px;
    margin-top: 20px;
    font-size: clamp(50px, 5.7vw, 78px);
    line-height: 1.02;
    letter-spacing: -3px;
}

.candidate-assessment-page .candidate-entry-intro h1 > span {
    display: block;
    color: #bd8d0d;
}

.candidate-assessment-page .candidate-entry-intro > p {
    max-width: 650px;
    margin-top: 34px;
    font-size: 16px;
    line-height: 1.9;
}

.candidate-assessment-page .candidate-entry-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 56px;
    padding-top: 34px;
}

.candidate-assessment-page .candidate-entry-points > div {
    min-width: 0;
}

.candidate-assessment-page .candidate-entry-points strong {
    display: block;
    font-size: 34px;
    line-height: 1;
}

.candidate-assessment-page .candidate-entry-points span {
    display: block;
    margin-top: 12px;
    font-size: 10px;
    line-height: 1.55;
    letter-spacing: 1.3px;
    overflow-wrap: normal;
    word-break: normal;
}

.candidate-assessment-page .candidate-entry-card {
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 46px;
    display: block;
    border-radius: 24px;
}

.candidate-assessment-page .candidate-entry-card-header > span,
.candidate-assessment-page .candidate-information-item > span {
    color: #b88b17;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.candidate-assessment-page .candidate-entry-card-header h2 {
    margin-top: 12px;
    font-size: 36px;
    line-height: 1.15;
}

.candidate-assessment-page .candidate-entry-card-header h2 > span {
    display: block;
}

.candidate-assessment-page .candidate-entry-card-header p {
    margin-top: 14px;
    color: #71837c;
    font-size: 13px;
    line-height: 1.7;
}

.candidate-assessment-page .candidate-information-card {
    margin-top: 30px;
    padding: 22px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    background: #f7f9f8;
    border: 1px solid #e1e8e5;
    border-radius: 14px;
}

.candidate-assessment-page .candidate-information-item {
    min-width: 0;
}

.candidate-assessment-page .candidate-information-item strong {
    display: block;
    margin-top: 7px;
    font-size: 15px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.candidate-assessment-page .candidate-assessment-info {
    margin-top: 20px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid #e1e8e5;
    border-left: 1px solid #e1e8e5;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.candidate-assessment-page .candidate-assessment-info > div {
    padding: 20px 14px;
    text-align: center;
}

.candidate-assessment-page .candidate-assessment-info > div + div {
    border-left: 1px solid #e1e8e5;
}

.candidate-assessment-page .candidate-assessment-info span {
    display: block;
    color: #173c32;
    font-size: 25px;
    font-weight: 900;
    line-height: 1;
}

.candidate-assessment-page .candidate-assessment-info p {
    margin-top: 8px;
    color: #7b8985;
    font-size: 10px;
}

.candidate-assessment-page .candidate-agreement {
    margin-top: 24px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
    cursor: pointer;
}

.candidate-assessment-page .candidate-agreement input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.candidate-assessment-page .candidate-custom-checkbox {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd8d3;
    border-radius: 6px;
    color: transparent;
    font-size: 12px;
    font-weight: 900;
    background: #fff;
}

.candidate-assessment-page .candidate-agreement input:checked + .candidate-custom-checkbox {
    background: #173c32;
    border-color: #173c32;
    color: #fff;
}

.candidate-assessment-page .candidate-agreement p {
    color: #52665f;
    font-size: 12px;
    line-height: 1.65;
}

.candidate-assessment-page .candidate-start-button {
    width: 100%;
    min-height: 54px;
    margin-top: 24px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border-radius: 10px;
    background: #173c32;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.candidate-assessment-page .candidate-start-button:disabled {
    opacity: .38;
    cursor: not-allowed;
}

.candidate-assessment-page .candidate-privacy-note {
    margin-top: 22px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.candidate-assessment-page .candidate-privacy-note p {
    color: #84928d;
    font-size: 10px;
    line-height: 1.6;
}

.candidate-assessment-page .candidate-loading-card,
.candidate-assessment-page .candidate-error-card,
.candidate-assessment-page .candidate-completed-card {
    width: 100%;
    max-width: 620px;
    padding: 55px 45px;
    background: #fff;
    border: 1px solid #e0e8e5;
    border-radius: 22px;
    text-align: center;
    box-shadow: 0 25px 70px rgba(23, 60, 50, .08);
}

@media (max-width: 980px) {
    .candidate-assessment-page .candidate-entry-layout {
        grid-template-columns: 1fr;
        gap: 52px;
    }

    .candidate-assessment-page .candidate-entry-intro {
        text-align: center;
    }

    .candidate-assessment-page .candidate-entry-intro h1,
    .candidate-assessment-page .candidate-entry-intro > p {
        margin-left: auto;
        margin-right: auto;
    }

    .candidate-assessment-page .candidate-entry-card {
        max-width: 620px;
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    .candidate-assessment-page .candidate-entry-wrapper {
        padding: 42px 18px 70px;
    }

    .candidate-assessment-page .candidate-entry-intro h1 {
        font-size: 42px;
        letter-spacing: -2px;
    }

    .candidate-assessment-page .candidate-entry-points {
        grid-template-columns: 1fr;
        gap: 18px;
        text-align: left;
    }

    .candidate-assessment-page .candidate-entry-points > div {
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 14px;
        align-items: center;
    }

    .candidate-assessment-page .candidate-entry-points span {
        margin-top: 0;
    }

    .candidate-assessment-page .candidate-entry-card {
        padding: 30px 22px;
    }

    .candidate-assessment-page .candidate-entry-card-header h2 {
        font-size: 30px;
    }

    .candidate-assessment-page .candidate-information-card {
        grid-template-columns: 1fr;
    }
}