body {
    background-color: #040A1F;
    font-family: "Inter", sans-serif;
    color: #fff;
    margin: 0;
    padding: 20px;
    font-weight: 400;
}
.container {
    max-width: 420px;
    margin: 0 auto;
    /*background: #0e142a;*/
    border-radius: 12px;
    padding: 20px;
    /*box-shadow: 0 0 15px rgba(0,0,0,0.4);*/
}

.mb-32px {
    margin-bottom: 32px;
}

.mb-10px {
    margin-bottom: 10px;
}

.mb-5px {
    margin-bottom: 5px;
}

.text-center {
    text-align: center;
}
.hidden { display: none; }
h2 { display:flex; align-items:center; gap:8px; font-size:1.5rem; margin-top:30px; }
p { color: #e9e8e8; margin-bottom:15px; }
label {
    font-weight: 500;
}
.progress { background-color: #022f4c; border-radius:10px; height: 18px; margin-bottom:20px; overflow:hidden;}
.progress-bar { background-color: #02afe6; height:100%; width: 15%; border-radius:10px; transition:width .25s ease; }
.option {
    background-color: #04314e;
    padding:10px 12px;
    margin: 12px 0;
    border-radius: 10px;
    cursor:pointer;
    transition:all .15s ease;
    border: 2.5px solid transparent;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}
.option:hover { background-color: #074167; }
.option.selected {
    background-color:#024b6d;
    border-color: #00b8ef;
}

#polarizationPhysical .single-row .option, #polarizationEmotional .single-row .option, #polarizationMental .single-row .option {
    height: 60px;
}

.select-all { text-transform:uppercase; font-weight:bold; background-color: #022f4c; }
.btn {
    display:block;
    width:100%;
    text-align:center;
    background-color: #019ed2;
    color:#fff;
    border:none;
    padding:12px;
    margin-top:25px;
    border-radius: 10px;
    font-weight:bold;
    font-size: 16px;
    cursor:pointer;
    transition:background .15s;
}
.btn:hover { background-color: rgba(1, 158, 210, 0.89); }
.question { margin-bottom: 30px; opacity:.3; pointer-events:none; transition:opacity .2s; }
.question.active { opacity:1; pointer-events:auto; }
.scale { display:flex; gap:3px; margin-top:8px; }
.scale div {
    box-sizing: border-box;
    flex:1;
    background: #04314e;
    text-align:center;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor:pointer;
    transition:background .15s;
    border: 1px solid #024d6f;
    user-select:none;
    -webkit-tap-highlight-color: transparent;
}
.scale div:hover { background: #043555; }
.scale div.selected {
    background-color:#024b6d;
    border-color: #00b8ef;
    box-shadow: inset 0 0 0 1.5px #00b8ef;
}
#results ul { padding-left:20px; }
#results h3 { margin-bottom:5px; }
.single-row .option {
    display:flex;
    align-items:center;
    justify-content:center;
    flex:1;
    text-align:center;
    height: 50px;
    padding-right: 2px;
    padding-left: 2px;
}
.options-container.single-row { display:flex; gap:3px; font-size: 11px; }
textarea {
    width:100%;
    background-color:#04314e;
    color:#fff;
    border:1px solid #024d6f;
    border-radius: 10px;
    padding:10px;
    resize:none;
    font-family:inherit;
    font-size:0.9rem;
    box-sizing:border-box;
}

/* ⬇️ Injected input + label styling */
label {
    display:block;
    margin-top:14px;
    margin-bottom:6px;
    color:#fff;
    font-weight:500;
    font-size:0.9rem;
}

input {
    width:100%;
    padding:10px 12px;
    border-radius: 10px;
    border: 1px solid #024d6f;
    background-color: #04314e;
    color:#fff;
    font-size:0.9rem;
    box-sizing:border-box;
    transition:border-color 0.2s, box-shadow 0.2s;
    margin-bottom: 10px;
}

input:focus, select:focus, textarea:focus {
    outline:none;
    border-color:#5db8ff;
    box-shadow:0 0 5px rgba(93,184,255,0.5);
}

.char-count { text-align:right; font-size:0.75rem; color:#bbb; margin-top:6px; }
pre { white-space:pre-wrap; word-break:break-word; font-size:0.9rem; }

h2 img {
    height: 22px;
}

#nextBtn {
    margin-top: 32px;
}

#backBtn, .policy-btn {
    background: transparent !important;
}

@media (max-width: 767px) {
    .container {
        padding: 0;
    }
}

@media (max-width: 540px) {
    .single-row {
        font-size: 11px !important;
    }

    .single-row .option {
        padding-left: 2px;
        padding-right: 2px;
    }
}

@media (max-width: 425px) {
    .scale div {
        height: 50px;
    }
}