.citizen-resident-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 8% 14%, rgba(15, 139, 102, .13), transparent 28rem),
        radial-gradient(circle at 92% 8%, rgba(224, 170, 51, .12), transparent 24rem),
        #f7fbf9;
}

.citizen-resident-page {
    max-width: 1560px;
    margin: 0 auto;
    padding-bottom: 48px;
}

.citizen-resident-hero,
.citizen-resident-wizard,
.citizen-resident-correction,
.citizen-resident-state-card,
.citizen-resident-help {
    border: 1px solid rgba(9, 119, 86, .24);
    border-radius: 24px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 45px rgba(25, 69, 57, .09);
}

.citizen-resident-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 22px 0 16px;
    padding: 28px 32px;
}

.citizen-resident-hero h1,
.citizen-resident-wizard h2,
.citizen-resident-state-card h2,
.citizen-resident-correction h2 {
    color: #102c23;
    margin: 6px 0 8px;
    letter-spacing: -.035em;
}

.citizen-resident-hero h1 { font-size: clamp(1.9rem, 3vw, 2.75rem); }
.citizen-resident-hero p,
.citizen-resident-wizard-head p,
.citizen-resident-step-copy p,
.citizen-resident-state-card p,
.citizen-resident-correction header p {
    color: #5b7169;
    font-size: 1rem;
    line-height: 1.55;
    margin: 0;
}

.citizen-resident-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.citizen-resident-timeline li {
    display: grid;
    grid-template-columns: 38px 1fr;
    grid-template-rows: auto auto;
    column-gap: 11px;
    align-items: center;
    min-height: 70px;
    padding: 12px 15px;
    border: 1px solid #d6e4df;
    border-radius: 17px;
    background: rgba(255, 255, 255, .85);
    color: #687b74;
}

.citizen-resident-timeline li > span {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #edf4f1;
    font-weight: 800;
}

.citizen-resident-timeline b { color: #27453b; font-size: .92rem; }
.citizen-resident-timeline small { font-size: .77rem; }
.citizen-resident-timeline .is-done { border-color: rgba(3, 139, 94, .38); background: #f0fbf6; }
.citizen-resident-timeline .is-done > span { background: #087e59; color: #fff; }
.citizen-resident-timeline .is-active { border-color: rgba(201, 145, 17, .55); background: #fffaf0; }
.citizen-resident-timeline .is-active > span { background: #dcae35; color: #17372c; }

.citizen-resident-live-message {
    margin: 14px 0;
    padding: 14px 17px;
    border: 1px solid #a8d5c5;
    border-radius: 14px;
    background: #effaf6;
    color: #075e44;
    font-weight: 700;
}

.citizen-resident-live-message.is-error {
    border-color: #f1b4aa;
    background: #fff1ef;
    color: #a52817;
}

.citizen-resident-onboarding-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin: 0 0 18px;
    padding: 20px 22px;
    border: 1px solid rgba(8, 126, 89, .34);
    border-radius: 20px;
    background: linear-gradient(110deg, #f0fbf6, #fffaf0);
    box-shadow: 0 14px 34px rgba(26, 74, 60, .08);
}

.citizen-resident-onboarding-card--portal { margin-top: 18px; }
.citizen-resident-onboarding-card.is-update_needed { border-color: rgba(202, 74, 44, .38); background: linear-gradient(110deg, #fff2ef, #fffaf0); }
.citizen-resident-onboarding-card.is-approved { background: #effaf5; }
.citizen-resident-onboarding-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 17px;
    background: #087e59;
    color: #fff;
}
.citizen-resident-onboarding-card.is-update_needed .citizen-resident-onboarding-icon { background: #c54731; }
.citizen-resident-onboarding-card h2 { margin: 4px 0 5px; color: #15372c; font-size: 1.24rem; letter-spacing: -.02em; }
.citizen-resident-onboarding-card p { margin: 0; color: #5e746b; line-height: 1.45; }
.citizen-resident-onboarding-status { display: inline-block; margin-top: 7px; color: #527067; font-size: .82rem; }

.citizen-resident-wizard,
.citizen-resident-correction { overflow: hidden; }

.citizen-resident-wizard-head,
.citizen-resident-correction > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 30px;
    border-bottom: 1px solid #e1ebe7;
    background: linear-gradient(110deg, #f4fcf8, #fffaf0);
}

.citizen-resident-save-note,
.citizen-resident-reference {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 9px 13px;
    border: 1px solid #bcdad0;
    border-radius: 999px;
    background: #fff;
    color: #176047;
    font-size: .82rem;
    font-weight: 800;
}

.citizen-resident-step-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 0 30px;
    border-bottom: 1px solid #e1ebe7;
    background: #fff;
}

.citizen-resident-step-tabs button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 58px;
    padding: 10px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #70827b;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.citizen-resident-step-tabs button span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #edf3f1;
}

.citizen-resident-step-tabs button.is-active {
    border-color: #087e59;
    color: #075f44;
}

.citizen-resident-step-tabs button.is-complete { color: #087e59; }
.citizen-resident-step-tabs button.is-complete span,
.citizen-resident-step-tabs button.is-active span { background: #087e59; color: #fff; }

.citizen-resident-step { padding: 28px 30px 32px; }
.citizen-resident-step[hidden] { display: none !important; }

.citizen-resident-step-copy {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: 10px;
    margin-bottom: 22px;
}

.citizen-resident-step-copy > span {
    grid-row: 1 / 3;
    padding: 6px 9px;
    border-radius: 9px;
    background: #e8f7f1;
    color: #087e59;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.citizen-resident-step-copy h3 { margin: 0; color: #17362c; font-size: 1.5rem; letter-spacing: -.025em; }
.citizen-resident-step-copy p { grid-column: 2; }

.citizen-resident-fields {
    display: grid;
    gap: 16px;
}

.citizen-resident-fields.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.citizen-resident-fields.three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.citizen-resident-fields .span-two { grid-column: span 2; }
.citizen-resident-fields .span-three { grid-column: span 3; }

.citizen-resident-fields label,
.citizen-resident-photo-consent {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    color: #244239;
    font-weight: 750;
}

.citizen-resident-fields label > span,
.citizen-resident-photo-consent > span { font-size: .9rem; }
.citizen-resident-fields label b,
.citizen-resident-photo-consent b,
.citizen-resident-camera b,
.citizen-resident-location b { color: #c13a25; }
.citizen-resident-fields small,
.citizen-resident-photo-consent small { color: #71847d; font-size: .76rem; font-weight: 500; line-height: 1.35; }

.citizen-resident-fields input,
.citizen-resident-fields select,
.citizen-resident-fields textarea,
.citizen-resident-photo-consent select,
.citizen-resident-location-details input {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid #cbdcd6;
    border-radius: 12px;
    background: #fff;
    color: #17362c;
    font: inherit;
    font-weight: 550;
}

.citizen-resident-fields textarea { min-height: 86px; resize: vertical; }
.citizen-resident-fields input:focus,
.citizen-resident-fields select:focus,
.citizen-resident-fields textarea:focus,
.citizen-resident-photo-consent select:focus {
    border-color: #087e59;
    outline: 3px solid rgba(8, 126, 89, .14);
}

.citizen-resident-fields input[readonly] { background: #f1f5f3; color: #546a62; }
.citizen-resident-fields .is-invalid,
.citizen-resident-choice-cards.is-invalid,
.citizen-resident-location.is-invalid { border-color: #dc4934 !important; outline: 2px solid rgba(220, 73, 52, .14); }

.citizen-resident-camera {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 22px;
    align-items: center;
    margin-top: 24px;
    padding: 20px;
    border: 1px solid #c7ddd5;
    border-radius: 18px;
    background: #f7fbf9;
}

.citizen-resident-camera-copy h4,
.citizen-resident-location-head h4 { margin: 5px 0 7px; color: #15372c; font-size: 1.16rem; }
.citizen-resident-camera-copy p,
.citizen-resident-location-head p { margin: 0 0 12px; color: #667b73; line-height: 1.45; }
.citizen-resident-camera-copy > small { display: block; margin-top: 10px; color: #6a7d76; }
.citizen-resident-camera-actions { display: flex; gap: 9px; flex-wrap: wrap; }

.citizen-resident-camera-preview {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    overflow: hidden;
    border: 2px solid #b9d4ca;
    border-radius: 18px;
    background: #dfece7;
}

.citizen-resident-camera-preview video,
.citizen-resident-camera-preview img { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.citizen-resident-camera-preview img { transform: none; }
.citizen-resident-camera-placeholder { display: grid; place-items: center; gap: 10px; color: #5f766d; text-align: center; }
.citizen-resident-camera-placeholder svg { width: 44px; height: 44px; }
.citizen-resident-photo-consent { grid-column: 1 / -1; }

.citizen-resident-choice-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
}

.citizen-resident-choice-cards legend { margin-bottom: 8px; color: #314e44; font-weight: 850; }
.citizen-resident-choice-cards label {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 15px;
    border: 1px solid #cadbd5;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
}
.citizen-resident-choice-cards label:has(input:checked) { border-color: #087e59; background: #f0faf6; box-shadow: inset 0 0 0 1px #087e59; }
.citizen-resident-choice-cards input { margin-top: 3px; accent-color: #087e59; }
.citizen-resident-choice-cards span { display: grid; gap: 4px; }
.citizen-resident-choice-cards b { color: #18392e; }
.citizen-resident-choice-cards small { color: #667a72; line-height: 1.35; }

.citizen-resident-location,
.citizen-resident-existing {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid #c7ddd5;
    border-radius: 18px;
    background: #f7fbf9;
}

.citizen-resident-location-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}
.citizen-resident-location-head > div:last-child { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.citizen-resident-map { min-height: 360px; border: 1px solid #b9d4ca; border-radius: 15px; overflow: hidden; background: #e4efeb; }
.citizen-resident-map > p { display: grid; place-items: center; min-height: 360px; margin: 0; color: #60756d; }
.citizen-resident-location-details { display: grid; grid-template-columns: 190px 190px 1fr; gap: 10px; align-items: end; margin-top: 12px; }
.citizen-resident-location-details label { display: grid; gap: 5px; color: #466057; font-size: .78rem; font-weight: 750; }
.citizen-resident-location-details input { min-height: 42px; background: #fff; font-size: .85rem; }
.citizen-resident-location-details > span { padding: 11px 13px; border-radius: 11px; background: #edf3f1; color: #546b62; font-size: .85rem; }
.citizen-resident-location-details > span.is-valid { background: #e4f7ee; color: #08714f; font-weight: 800; }
.citizen-resident-location-details > span.is-error { background: #fff0ed; color: #ae2d1b; font-weight: 800; }

.citizen-resident-household-results { display: grid; gap: 8px; margin-top: 12px; }
.citizen-resident-household-results > p { margin: 0; color: #687c74; }
.citizen-resident-household-results label { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #cadbd5; border-radius: 12px; background: #fff; color: #26483d; font-weight: 750; cursor: pointer; }
.citizen-resident-household-results label:has(input:checked) { border-color: #087e59; background: #effaf6; }

.citizen-resident-review {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.citizen-resident-review article { padding: 15px; border: 1px solid #d1e0db; border-radius: 14px; background: #f8fbfa; }
.citizen-resident-review h4 { margin: 0 0 8px; color: #17392e; }
.citizen-resident-review dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 0; }
.citizen-resident-review dt { color: #75877f; font-size: .78rem; }
.citizen-resident-review dd { margin: 0; color: #28483d; font-weight: 750; text-align: right; overflow-wrap: anywhere; }

.citizen-resident-consent {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 20px 0;
    padding: 16px;
    border: 1px solid #bcd7ce;
    border-radius: 14px;
    background: #f2faf7;
    color: #173b2f;
    cursor: pointer;
}
.citizen-resident-consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: #087e59; }
.citizen-resident-consent span { display: grid; gap: 4px; }
.citizen-resident-consent small { color: #62776f; line-height: 1.4; }
.citizen-resident-security-note { display: flex; gap: 10px; padding: 14px; border-radius: 13px; background: #fff8e8; color: #604b17; }

.citizen-resident-wizard-actions {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 18px 30px;
    border-top: 1px solid #e1ebe7;
    background: #f8fbfa;
}
.citizen-resident-wizard-actions > span { color: #60746c; text-align: center; font-size: .88rem; font-weight: 750; }

.citizen-resident-state-card {
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: 22px;
    align-items: flex-start;
    padding: 34px;
}
.citizen-resident-state-icon { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 20px; }
.citizen-resident-state-icon svg { width: 30px; height: 30px; }
.citizen-resident-state-icon.is-gold { background: #fff1c9; color: #9a6b00; }
.citizen-resident-state-icon.is-green { background: #dff5eb; color: #087e59; }
.citizen-resident-state-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.citizen-resident-status-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0 0; }
.citizen-resident-status-details div { padding: 13px; border: 1px solid #d4e3de; border-radius: 13px; background: #f8fbfa; }
.citizen-resident-status-details dt { color: #6d8078; font-size: .76rem; }
.citizen-resident-status-details dd { margin: 3px 0 0; color: #17392e; font-weight: 850; overflow-wrap: anywhere; }

.citizen-resident-correction > header { display: block; }
.citizen-resident-correction .citizen-resident-reference { margin-top: 14px; }
.citizen-resident-correction form { padding: 26px 30px 30px; }

.citizen-resident-help {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 18px;
    padding: 20px;
}
.citizen-resident-help > div { display: flex; gap: 11px; padding: 8px 18px; border-right: 1px solid #dce8e4; color: #087e59; }
.citizen-resident-help > div:last-child { border-right: 0; }
.citizen-resident-help span { display: grid; gap: 3px; color: #24473b; }
.citizen-resident-help small { color: #687d75; line-height: 1.35; }

.citizen-resident-busy { cursor: wait; }
.citizen-resident-busy [data-profile-submit],
.citizen-resident-busy [data-correction-submit] { opacity: .65; pointer-events: none; }

@media (max-width: 1050px) {
    .citizen-resident-fields.three-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .citizen-resident-fields .span-three { grid-column: span 2; }
    .citizen-resident-camera { grid-template-columns: 1fr 230px; }
    .citizen-resident-location-details { grid-template-columns: repeat(2, 1fr); }
    .citizen-resident-location-details > span { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .citizen-resident-page { min-width: 760px; }
}