#phoneAppJob {
    background:
        radial-gradient(ellipse at 85% 0%, rgba(74, 120, 53, 0.32), transparent 42%),
        linear-gradient(160deg, #102018 0%, #09130f 52%, #060b09 100%);
}

.job-app-header {
    background: rgba(15, 35, 25, 0.94);
    border-bottom: 1px solid rgba(163, 230, 53, 0.22);
}

.job-wallet,
.job-intro,
.job-question {
    border: 1px solid rgba(163, 230, 53, 0.2);
    background: rgba(12, 31, 21, 0.78);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}

.job-intro {
    background: linear-gradient(120deg, rgba(28, 68, 43, 0.84), rgba(13, 37, 27, 0.86));
}

.job-role {
    width: 100%;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 15px;
    color: #f8fafc;
    background: linear-gradient(115deg, rgba(26, 44, 34, 0.96), rgba(15, 28, 22, 0.96));
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.22);
}

.job-role:hover:not(:disabled) {
    border-color: rgba(163, 230, 53, 0.56);
    box-shadow: 0 0 16px rgba(132, 204, 22, 0.14), 0 9px 22px rgba(0, 0, 0, 0.28);
    transform: translateY(-1px);
}

.job-role:disabled {
    cursor: not-allowed;
    opacity: 0.56;
}

.job-role-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(190, 242, 100, 0.24);
    border-radius: 12px;
    color: #d9f99d;
    background: rgba(101, 163, 13, 0.18);
    font-size: 15px;
}

.job-role-copy {
    min-width: 0;
    flex: 1;
}

.job-role-name {
    display: block;
    font-size: 12px;
    font-weight: 900;
}

.job-role-meta {
    display: block;
    margin-top: 3px;
    color: rgba(226, 232, 240, 0.62);
    font-size: 9px;
}

.job-role-pay {
    color: #bef264;
    font-family: monospace;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.job-cooldown {
    border: 1px solid rgba(251, 191, 36, 0.42);
    background: linear-gradient(120deg, rgba(120, 70, 15, 0.3), rgba(38, 29, 13, 0.8));
    box-shadow: 0 0 18px rgba(245, 158, 11, 0.1);
}

.job-answer {
    min-width: 0;
    border: 1px solid rgba(163, 230, 53, 0.3);
    background: rgba(3, 12, 7, 0.8);
    outline: none;
}

.job-answer:focus {
    border-color: #a3e635;
    box-shadow: 0 0 0 2px rgba(163, 230, 53, 0.14);
}

.job-answer:disabled {
    opacity: 0.65;
}

.job-submit {
    flex: 0 0 auto;
    background: linear-gradient(135deg, #bef264, #65a30d);
    box-shadow: 0 5px 15px rgba(101, 163, 13, 0.22);
}

.job-submit:hover:not(:disabled) {
    box-shadow: 0 0 16px rgba(163, 230, 53, 0.38);
}

.job-submit:disabled {
    cursor: not-allowed;
    filter: grayscale(0.5);
    opacity: 0.6;
}

#jobFeedback[data-result="correct"] {
    color: #d9f99d;
    border: 1px solid rgba(132, 204, 22, 0.34);
    background: rgba(54, 83, 20, 0.32);
}

#jobFeedback[data-result="wrong"] {
    color: #fecaca;
    border: 1px solid rgba(248, 113, 113, 0.34);
    background: rgba(127, 29, 29, 0.28);
}

@media (max-width: 360px) {
    .job-role { padding: 9px; gap: 8px; }
    .job-role-icon { width: 34px; height: 34px; flex-basis: 34px; }
    .job-role-pay { font-size: 10px; }
}