:root {
--err:#DC2626;
--ok:#16a34a;
--ok-l:#dcfce7;
}

.page-wrap {
max-width:1100px; margin:0 auto; padding:40px 32px 64px; display:grid; grid-template-columns:1fr 340px; gap:32px; align-items:start;
min-width:0;
}

.form-card {
background:#fff; border-radius:var(--radius); border:1px solid #ede8e1; box-shadow:var(--shadow-md); overflow:hidden;
}

.steps-header {
background:var(--org); padding:24px 32px;
}

.steps-header h1 {
font-family:'DM Serif Display',serif; font-size:28px; color:#fff; margin-bottom:4px;
}

.steps-header p {
font-size:14px; color:rgba(255,255,255,.8);
}

.steps-row {
display:flex; align-items:center; gap:0; margin-top:20px;
}

.step-item {
display:flex; align-items:center; gap:8px; flex:1;
}

.step-item:last-child {
flex:0;
}

.step-circle {
width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; flex-shrink:0;
    transition:all .3s;
}

.step-circle.done {
background:#fff; color:var(--org);
}

.step-circle.current {
background:#fff; color:var(--org); box-shadow:0 0 0 3px rgba(255,255,255,.4);
}

.step-circle.upcoming {
background:rgba(255,255,255,.2); color:rgba(255,255,255,.7); border:1.5px solid rgba(255,255,255,.3);
}

.step-label {
font-size:12px; font-weight:600; color:rgba(255,255,255,.9); white-space:nowrap;
}

.step-label.upcoming {
color:rgba(255,255,255,.5);
}

.step-connector {
flex:1; height:2px; background:rgba(255,255,255,.25); margin:0 8px; border-radius:2px;
}

.step-connector.done {
background:rgba(255,255,255,.7);
}

.progress-bar {
height:4px; background:#f0ebe3;
}

.progress-fill {
height:100%; background:var(--org); border-radius:0 2px 2px 0; transition:width .4s ease;
}

.form-body {
padding:32px 32px 28px;
}

.step-panel {
display:none;
}

.step-panel.active {
display:block;
}

.step-title {
font-size:20px; font-weight:700; color:#1a1a1a; margin-bottom:4px;
}

.step-subtitle {
font-size:14px; color:#888; margin-bottom:24px;
}

.field-grid {
display:grid; grid-template-columns:1fr 1fr; gap:16px;
}

.field-grid.single {
grid-template-columns:1fr;
}

.field-span-full {
grid-column:1 / -1;
}

.form-group {
display:flex; flex-direction:column; gap:5px; margin-bottom:16px;
}

.form-group:last-child {
margin-bottom:0;
}

.form-label {
font-size:13px; font-weight:600; color:#444; display:flex; align-items:center; gap:4px;
}

.req {
color:var(--org); font-size:12px;
}

.form-input {
height:44px; border:1.5px solid #e0dbd2; border-radius:var(--radius-sm);
    padding:0 14px; font-size:14px; font-family:inherit; color:#1a1a1a;
    background:#fafaf8; width:100%; transition:border-color .15s, box-shadow .15s;
    outline:none;
}

.form-input:focus {
border-color:var(--org); box-shadow:0 0 0 3px rgba(247,148,29,.12); background:#fff;
}

.form-input.error {
border-color:var(--err); box-shadow:0 0 0 3px rgba(220,38,38,.08);
}

.form-textarea {
border:1.5px solid #e0dbd2; border-radius:var(--radius-sm);
    padding:12px 14px; font-size:14px; font-family:inherit; color:#1a1a1a;
    background:#fafaf8; width:100%; transition:border-color .15s, box-shadow .15s;
    outline:none; resize:vertical; min-height:110px; line-height:1.6;
}

.form-textarea:focus {
border-color:var(--org); box-shadow:0 0 0 3px rgba(247,148,29,.12); background:#fff;
}

.form-textarea.error {
border-color:var(--err); box-shadow:0 0 0 3px rgba(220,38,38,.08);
}

.why-highlight {
background:var(--org-l); border:1.5px solid var(--org-b); border-radius:var(--radius-sm); padding:14px; margin-bottom:20px;
}

.why-highlight .form-label {
color:var(--org-d); font-size:14px; margin-bottom:8px; display:flex; align-items:center; gap:7px;
}

.why-icon {
font-size:20px;
}

.form-hint {
font-size:12px; color:#aaa; margin-top:2px; display:flex; align-items:center; gap:4px;
}

.form-hint svg {
flex-shrink:0;
}

.error-msg {
font-size:13px; color:#DC2626; margin-top:4px; display:none; font-weight:600; line-height:1.4;
}

.error-msg.show {
display:block;
}

#join-server-error.show {
padding:12px 32px 0;
}

.li-field-wrap {
position:relative;
}

.li-field-prefix {
position:absolute; left:0; top:0; bottom:0; width:44px;
    display:flex; align-items:center; justify-content:center;
    background:var(--li); border-radius:var(--radius-sm) 0 0 var(--radius-sm);
    font-size:13px; font-weight:800; color:#fff; pointer-events:none;
    border:1.5px solid var(--li); border-right:none;
}

.li-field-input {
padding-left:58px; border-color:var(--li-b);
}

.li-field-input:focus {
border-color:var(--li); box-shadow:0 0 0 3px rgba(10,102,194,.12);
}

.causes-grid {
display:flex; flex-wrap:wrap; gap:8px;
}

.cause-toggle {
padding:7px 14px; border-radius:20px; font-size:13px; font-weight:500;
    border:1.5px solid #e0dbd2; color:#666; background:#fafaf8;
    cursor:pointer; transition:all .15s; user-select:none;
}

.cause-toggle:hover {
border-color:var(--org); color:var(--org-d);
}

.cause-toggle.selected {
background:var(--org-l); color:var(--org-d); border-color:var(--org-b); font-weight:600;
}

.history-toggle {
padding:16px 16px; border-radius:var(--radius-sm); border:1.5px solid #e0dbd2; background:#fafaf8;
    cursor:pointer; transition:all .15s; user-select:none;
}

.history-toggle:hover {
border-color:var(--org);
}

.history-toggle.selected {
background:var(--org-l); border-color:var(--org); box-shadow:0 0 0 1px var(--org);
}

.add-nfp-btn {
display:flex; align-items:center; gap:8px; padding:11px 14px;
    border:1.5px dashed var(--org-b); border-radius:var(--radius-sm);
    background:var(--org-l); cursor:pointer; font-size:14px; color:var(--org-d);
    font-weight:500; transition:all .15s; width:100%; margin-bottom:0;
}

.add-nfp-btn:hover {
background:#fde8c0; border-color:var(--org);
}

.add-nfp-icon {
width:28px; height:28px; border-radius:7px; background:var(--org); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:16px; color:#fff; line-height:1;
}

.total-banner {
display:flex; align-items:center; gap:14px;
    background:var(--org); border-radius:var(--radius-sm); padding:14px 18px; margin-top:12px;
}

.total-banner-text {
flex:1; color:#fff;
}

.total-banner-label {
font-size:12px; opacity:.8;
}

.total-banner-note {
font-size:11px; opacity:.6; margin-top:1px;
}

.total-banner-num {
font-size:36px; font-weight:700; color:#fff; line-height:1;
}

.total-banner-unit {
font-size:13px; color:rgba(255,255,255,.75);
}

.photo-row {
gap:20px; align-items:flex-start;
}

.photo-preview {
width:100px; height:100px; border-radius:50%; flex-shrink:0;
    border:3px solid var(--org-b); background:var(--org-l);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; position:relative; margin: auto auto 20px auto;
}

.photo-preview img {
width:100%; height:100%; object-fit:cover; border-radius:50%; display:none;
}

.photo-preview-icon {
font-size:36px; color:var(--org-b);
}

.upload-zone {
flex:1; border:2px dashed var(--org-b); border-radius:var(--radius-sm);
    padding:24px; text-align:center; cursor:pointer;
    background:var(--org-l); transition:all .15s;
}

.upload-zone:hover {
border-color:var(--org); background:#fde8c0;
}

.upload-zone.dragover {
border-color:var(--org); background:#fde8c0; transform:scale(1.01);
}

.upload-icon {
font-size:28px; margin-bottom:8px;
}

.upload-main {
font-size:14px; font-weight:600; color:var(--org-d); margin-bottom:3px;
}

.upload-sub {
font-size:12px; color:var(--org); opacity:.7;
}

#photo-file-input {
display:none;
}

.review-content {
display:flex;
flex-direction:column;
gap:14px;
margin-bottom:22px;
}

.review-card {
background:#fff;
border:1.5px solid #ede8e1;
border-radius:14px;
overflow:hidden;
box-shadow:var(--shadow);
}

.review-hero {
display:flex;
align-items:center;
gap:16px;
padding:18px 20px;
background:linear-gradient(135deg,#FEF6EC,#fff);
border-bottom:1px solid #f2ede6;
}

.review-avatar {
width:72px;
height:72px;
border-radius:50%;
background:linear-gradient(135deg,var(--org),var(--org-d));
color:#fff;
font-weight:700;
font-size:22px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
border:3px solid #fff;
box-shadow:0 0 0 3px var(--org-b);
overflow:hidden;
}

.review-avatar-img {
width:100%;
height:100%;
object-fit:cover;
}

.review-hero-text {
min-width:0;
}

.review-name {
font-size:22px;
font-weight:700;
color:#1a1a1a;
line-height:1.2;
overflow-wrap:anywhere;
}

.review-role {
font-size:14px;
color:#777;
margin-top:4px;
overflow-wrap:anywhere;
}

.review-role strong {
color:#444;
}

.review-founding {
display:inline-flex;
margin-top:8px;
font-size:11px;
font-weight:700;
color:var(--org-d);
background:var(--org-l);
border:1px solid var(--org-b);
border-radius:20px;
padding:3px 10px;
}

.review-meta {
padding:4px 8px 8px;
}

.review-meta-row {
display:grid;
grid-template-columns:120px minmax(0,1fr);
gap:10px;
align-items:baseline;
padding:10px 12px;
border-bottom:1px solid #f5f0ea;
}

.review-meta-row:last-child {
border-bottom:none;
}

.review-meta-key {
font-size:12px;
font-weight:700;
color:#999;
text-transform:uppercase;
letter-spacing:.04em;
}

.review-meta-val,
.review-meta-link {
font-size:14px;
color:#1a1a1a;
overflow-wrap:anywhere;
}

.review-meta-link {
color:var(--li);
font-weight:600;
text-decoration:none;
}

.review-section {
background:#fff;
border:1.5px solid #ede8e1;
border-radius:14px;
padding:16px 18px;
}

.review-section-head {
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
flex-wrap:wrap;
margin-bottom:12px;
}

.review-section-title {
font-size:13px;
font-weight:700;
color:var(--org-d);
text-transform:uppercase;
letter-spacing:.06em;
margin-bottom:12px;
}

.review-section-head .review-section-title {
margin-bottom:0;
}

.review-why {
margin:0;
background:var(--org-l);
border-left:3px solid var(--org);
border-radius:0 10px 10px 0;
padding:12px 14px;
font-size:14px;
color:#444;
line-height:1.7;
font-style:italic;
overflow-wrap:anywhere;
}

.review-causes {
display:flex;
flex-wrap:wrap;
gap:8px;
}

.review-cause-chip {
padding:6px 12px;
border-radius:20px;
font-size:13px;
font-weight:600;
background:var(--org-l);
color:var(--org-d);
border:1.5px solid var(--org-b);
}

.review-hours-pill {
background:var(--org);
color:#fff;
border-radius:20px;
padding:4px 12px;
font-size:12px;
font-weight:700;
}

.review-nfp-list {
display:flex;
flex-direction:column;
gap:8px;
}

.review-nfp-item {
display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
background:#fafaf8;
border:1px solid #ede8e1;
border-radius:10px;
}

.review-nfp-icon {
width:32px;
height:32px;
border-radius:8px;
background:var(--org-l);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}

.review-nfp-name {
font-size:14px;
font-weight:700;
color:#1a1a1a;
overflow-wrap:anywhere;
}

.review-nfp-meta {
font-size:12px;
color:#888;
margin-top:2px;
}

.review-letter-tag {
display:inline-block;
margin-left:6px;
font-size:11px;
font-weight:700;
color:var(--org-d);
background:var(--org-l);
border-radius:20px;
padding:1px 8px;
}

.review-rank-note {
font-size:14px;
color:#555;
line-height:1.6;
background:var(--org-l);
border:1px solid var(--org-b);
border-radius:10px;
padding:12px 14px;
}

@media(max-width:600px) {
.review-hero {flex-direction:column;align-items:flex-start}
.review-meta-row {grid-template-columns:1fr;gap:2px}
}

.consent-box {
background:var(--org-l); border:1.5px solid var(--org-b); border-radius:var(--radius-sm);
    padding:16px 18px; margin-bottom:16px;
}

.consent-title {
font-size:14px; font-weight:700; color:var(--org-d); margin-bottom:4px;
}

.consent-text {
font-size:13px; color:#666; line-height:1.6;
}

.consent-text strong {
color:#444;
}

.checkbox-row {
display:flex; gap:10px; align-items:flex-start; margin-bottom:12px;
}

.checkbox-row:last-child {
margin-bottom:0;
}

.custom-checkbox {
width:20px; height:20px; border-radius:5px; border:2px solid #e0dbd2;
    background:#fff; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all .15s; margin-top:1px;
}

.custom-checkbox.checked {
background:var(--org); border-color:var(--org);
}

.custom-checkbox.checked::after {
content:'✓'; color:#fff; font-size:12px; font-weight:700;
}

.checkbox-label {
font-size:13px; color:#555; line-height:1.5; cursor:pointer;
}

.form-nav {
display:flex; gap:10px; padding:20px 32px 28px; border-top:1px solid #f0ebe3;
}

.btn-prev {
flex:1; padding:13px; border-radius:var(--radius-sm); border:1.5px solid #e0dbd2; background:#fff; font-size:15px; font-weight:600; color:#666; cursor:pointer; transition:all .15s;
}

.btn-prev:hover {
background:#f5f0ea;
}

.btn-next {
flex:2; padding:13px; border-radius:var(--radius-sm); border:none; background:var(--org); color:#fff; font-size:15px; font-weight:700; cursor:pointer; transition:background .15s; display:flex; align-items:center; justify-content:center; gap:8px;
}

.btn-next:hover {
background:var(--org-d);
}

.btn-next:disabled {
background:#ddd; cursor:not-allowed;
}

.btn-submit {
flex:2; padding:13px; border-radius:var(--radius-sm); border:none; background:var(--org); color:#fff; font-size:15px; font-weight:700; cursor:pointer; transition:background .15s; display:flex; align-items:center; justify-content:center; gap:8px;
}

.success-screen {
display:none; text-align:center; padding:48px 32px;
}

.success-screen.show {
display:block;
}

.success-tick {
width:72px; height:72px; border-radius:50%; background:var(--ok-l); border:3px solid var(--ok); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-size:32px;
}

.success-title {
font-family:'DM Serif Display',serif; font-size:28px; color:#1a1a1a; margin-bottom:8px;
}

.success-sub {
font-size:15px; color:#777; margin-bottom:28px; line-height:1.6;
}

.success-actions {
display:flex; gap:10px; justify-content:center;
}

.btn-feed {
padding:12px 24px; border-radius:var(--radius-sm); background:var(--org); color:#fff; font-weight:700; font-size:15px; text-decoration:none;
}

.btn-profile {
padding:12px 24px; border-radius:var(--radius-sm); border:1.5px solid var(--org); color:var(--org); font-weight:700; font-size:15px; text-decoration:none;
}

.join-sidebar {
display:flex; flex-direction:column; gap:20px;
}

.sidebar-card {
background:#fff; border-radius:var(--radius); border:1px solid #ede8e1; overflow:hidden; box-shadow:var(--shadow);
}

.sidebar-card-header {
padding:16px 20px 12px; border-bottom:1px solid #f2ede6;
}

.sidebar-card-title {
font-size:15px; font-weight:700; color:#1a1a1a;
}

.sidebar-card-body {
padding:16px 20px;
}

.why-item {
display:flex; gap:12px; margin-bottom:14px;
}

.why-item:last-child {
margin-bottom:0;
}

.why-icon {
width:36px; height:36px; border-radius:9px; background:var(--org-l); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:18px;
}

.why-text-title {
font-size:14px; font-weight:600; color:#1a1a1a;
}

.why-text-sub {
font-size:13px; color:#999; margin-top:1px;
}

.quote-card {
background:linear-gradient(135deg,#1a1a1a 0%,#2d2d2d 100%); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow);
}

.quote-mark {
font-family:'DM Serif Display',serif; font-size:48px; color:var(--org); line-height:.6; margin-bottom:8px;
}

.quote-text {
font-size:13px; color:rgba(255,255,255,.85); line-height:1.7; font-style:italic; margin-bottom:14px;
}

.quote-author {
font-size:12px; font-weight:600; color:var(--org);
}

.quote-role {
font-size:11px; color:rgba(255,255,255,.4); margin-top:1px;
}

.member-preview {
display:flex; flex-direction:column; gap:8px;
}

.member-row {
display:flex; align-items:center; gap:10px;
}

.member-av {
width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; border:2px solid var(--org-b); flex-shrink:0;
}

.member-info {
flex:1;
}

.member-name {
font-size:13px; font-weight:600; color:#1a1a1a;
}

.member-co {
font-size:12px; color:#999;
}

.member-hrs {
font-size:12px; font-weight:700; color:var(--org-d); white-space:nowrap;
}

svg.icon-sm {
width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

svg.icon {
width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

@keyframes notif-pulse {
0%,100% { transform:scale(1); }
    50% { transform:scale(1.15); }
}

.ac-wrap {
position:relative;
width:100%;
min-width:0;
}

.ac-dropdown {
position:absolute;
top:calc(100% + 4px);
left:0;
right:0;
z-index:40;
display:none;
max-height:220px;
overflow-y:auto;
padding:6px;
background:#fff;
border:1.5px solid var(--org-b);
border-radius:10px;
box-shadow:0 10px 24px rgba(196,114,13,.16);
}

.ac-dropdown.open {
display:block;
}

.ac-item {
padding:10px 12px;
border-radius:8px;
font-size:14px;
color:#1a1a1a;
cursor:pointer;
}

.ac-item:hover {
background:var(--org-l);
color:var(--org-d);
}

.nfp-card {
background:#fff;
border:1.5px solid #ede8e1;
border-radius:12px;
padding:16px;
box-shadow:var(--shadow);
}

.nfp-card-head {
display:flex;
align-items:center;
gap:10px;
margin-bottom:14px;
}

.nfp-entry-icon {
width:32px;
height:32px;
border-radius:8px;
background:var(--org);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}

.nfp-card-title {
font-size:14px;
font-weight:700;
color:#1a1a1a;
flex:1;
}

.nfp-remove-btn {
width:32px;
height:32px;
border-radius:8px;
border:1.5px solid #e0dbd2;
background:#fff;
color:#888;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:14px;
flex-shrink:0;
}

.nfp-remove-btn:hover {
border-color:var(--err);
color:var(--err);
background:#FEF2F2;
}

.nfp-fields {
display:grid;
grid-template-columns:1fr 120px;
gap:12px;
}

.nfp-field {
display:flex;
flex-direction:column;
gap:5px;
min-width:0;
}

.nfp-field label {
font-size:12px;
font-weight:600;
color:#555;
}

.nfp-field-website,
.nfp-field-date,
.nfp-field-letter {
grid-column:1 / -1;
}

.nfp-hrs-wrap {
display:flex;
align-items:center;
gap:8px;
}

.nfp-hrs-wrap .nfp-hrs-input {
flex:1;
min-width:0;
}

.nfp-hrs-label {
font-size:12px;
font-weight:700;
color:var(--org-d);
flex-shrink:0;
}

.nfp-letter-row {
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}

.nfp-letter-btn {
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 14px;
border-radius:8px;
border:1.5px dashed var(--org-b);
background:var(--org-l);
color:var(--org-d);
font-size:13px;
font-weight:600;
cursor:pointer;
font-family:inherit;
}

.nfp-letter-btn:hover {
border-color:var(--org);
background:#fde8c0;
}

.nfp-letter-name {
font-size:12px;
color:#666;
overflow-wrap:anywhere;
}

@media(max-width:1100px) {
.page-wrap {padding:32px 20px 56px;gap:24px;grid-template-columns:minmax(0,1fr) 280px}
}

@media(max-width:900px) {
.page-wrap {grid-template-columns:1fr;padding:24px 16px 56px}
.field-grid {grid-template-columns:1fr}
.volunteerjoin-i13 {grid-template-columns:1fr}
.nfp-fields {grid-template-columns:1fr}
.form-body {padding:24px 20px}
.form-nav {padding:16px 20px 24px}
.steps-header {padding:22px 20px}
.steps-header h1 {font-size:24px}
#join-server-error.show {padding:12px 20px 0}
}

@media(max-width:768px) {
.page-wrap {padding:14px 14px 48px}
.form-body {padding:16px 14px}
.form-nav {padding:12px 14px 18px}
.steps-row {overflow-x:auto;gap:4px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.step-label {font-size:10px;white-space:nowrap}
.photo-row {flex-direction:column}
.success-actions {flex-direction:column;align-items:stretch}
.btn-feed,.btn-profile {text-align:center}
#join-server-error.show {padding:12px 14px 0}
}

@media(max-width:480px) {
.steps-header h1 {font-size:22px}
.step-title {font-size:18px}
.form-nav {flex-direction:column}
.btn-prev,.btn-next,.btn-submit {width:100%;flex:none}
}

/* extracted inline styles */
.volunteerjoin-i1 {
  display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,#f5a623,#e0850a);border-radius:20px;padding:5px 14px;margin-bottom:14px;box-shadow:0 2px 8px rgba(245,166,35,.35);
}

.volunteerjoin-i2 {
  font-size:14px;
}

.volunteerjoin-i3 {
  font-size:12px;font-weight:700;color:#fff;letter-spacing:.02em;
}

.volunteerjoin-i4 {
  flex:0;
}

.volunteerjoin-i5 {
  width:25%;
}

.volunteerjoin-i6 {
  margin-top:6px;
}

.volunteerjoin-i7 {
  font-size:12px;color:#999;line-height:1.4;
}

.volunteerjoin-i8 {
  margin-top:4px;
}

.volunteerjoin-i9 {
  font-size:11px;font-weight:400;color:#999;
}

.volunteerjoin-i10 {
  display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:3px;background:#0A66C2;color:#fff;font-size:10px;font-weight:800;margin-right:4px;
}

.volunteerjoin-i11 {
  color:#999;font-weight:400;font-size:11px;
}

.volunteerjoin-i12 {
  margin-top:24px;
}

.volunteerjoin-i13 {
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px;
}

.volunteerjoin-i14 {
  font-size:22px;margin-bottom:6px;
}

.volunteerjoin-i15 {
  font-weight:700;font-size:14.5px;color:#1a1a1a;
}

.volunteerjoin-i16 {
  font-size:12.5px;color:#777;margin-top:4px;
}

.volunteerjoin-i17 {
  display:none;margin-top:18px;background:#FEF6EC;border:1px solid #FDDCAB;border-radius:10px;padding:16px 18px;
}

.volunteerjoin-i18 {
  font-size:13.5px;color:#7a6a52;line-height:1.6;
}

.volunteerjoin-i19 {
  color:#C4720D;
}

.volunteerjoin-i20 {
  color:#C4720D;font-weight:600;
}

.volunteerjoin-i21 {
  margin-top:20px;display:none;
}

.volunteerjoin-i22 {
  margin-bottom:12px;
}

.volunteerjoin-i23 {
  display:flex;flex-direction:column;gap:12px;margin-bottom:10px;
}

.volunteerjoin-i24 {
  margin-top:12px;
}

.volunteerjoin-i25 {
  margin-top:20px;padding:14px 16px;background:#f5f0ea;border-radius:var(--radius-sm);font-size:13px;color:#666;line-height:1.6;
}

.volunteerjoin-i26 {
  color:var(--org);
}

.volunteerjoin-i27 {
  display:none;
}

.volunteerjoin-i28 {
  border:2px solid var(--org-b);background:linear-gradient(135deg,#FEF6EC,#fff);
}

.volunteerjoin-i29 {
  display:flex;align-items:center;gap:7px;
}

.volunteerjoin-i30 {
  background:#f3e8ff;color:#7c3aed;
}

.volunteerjoin-i31 {
  background:#dbeafe;color:#1e40af;
}

.volunteerjoin-i32 {
  background:#FEF6EC;color:#C4720D;
}

.volunteerjoin-i33 {
  background:#ecfdf5;color:#065f46;
}

.volunteerjoin-i34 {
  margin-top:12px;font-size:13px;color:#bbb;text-align:center;
}