:root{--design-ink:#20354b;--design-muted:#52647b;--design-line:#d6dfdf;--design-paper:#f2f4f1;--design-help:#a83f0d;--design-offer:#096e64;--design-shadow:0 4px 18px #20354b0a}
:is(.needhelp-app,.needhelp-admin,.public-profile-page){color:var(--design-ink);background:var(--design-paper);font-family:system-ui,-apple-system,"Segoe UI","Noto Sans TC","Microsoft JhengHei",sans-serif}
:is(.needhelp-app,.needhelp-admin,.public-profile-page) :is(button,input,select,textarea){border-radius:12px}
:is(.needhelp-app,.needhelp-admin,.public-profile-page) :is(input,select,textarea){border-color:#a9b9bf;background:#fff}
:is(.needhelp-app,.needhelp-admin,.public-profile-page) :is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid #315dbc;outline-offset:3px}
.needhelp-app>header{background:#fffdf9;border-bottom:1px solid var(--design-line);padding-block:14px}
.needhelp-app .brand strong{letter-spacing:.025em;color:var(--design-ink)}
.needhelp-app .brand small{color:var(--design-muted);letter-spacing:.12em}
.needhelp-app .brand-icon{border-radius:14px;box-shadow:0 2px 8px #20354b12}
.needhelp-app .view-switch{background:#e9eeec;padding:4px;border-radius:14px;gap:3px}
.needhelp-app .view-switch button[aria-pressed=true]{background:#20354b;color:#fff;box-shadow:none}
.needhelp-app .header-right>button{min-height:48px;border-color:var(--design-line)}
.needhelp-app #publish{background:var(--design-help);border-color:var(--design-help);color:#fff;box-shadow:0 4px 12px #a83f0d22}
.needhelp-app #publish:hover{background:#873108}
.needhelp-app .search-panel{background:#fffdf9;border-bottom:1px solid var(--design-line);padding-block:14px}
.needhelp-app .primary-controls>.tabs{background:transparent;padding:0;gap:8px}
.needhelp-app .tabs :is(#jobs,#people){border:1px solid var(--design-line);border-radius:14px;box-shadow:none;min-height:52px}
.needhelp-app #jobs{background:#faf0e7;color:#843a12}
.needhelp-app #people{background:#eaf4f0;color:#145c54}
.needhelp-app #jobs[aria-pressed=true]{background:var(--design-help);border-color:var(--design-help);color:#fff}
.needhelp-app #people[aria-pressed=true]{background:var(--design-offer);border-color:var(--design-offer);color:#fff}
.needhelp-app .primary-controls :is(input,select),.needhelp-app #toggle-filters{min-height:48px;height:48px;font-size:16px}
.needhelp-app #results-panel{background:var(--design-paper);border-right-color:var(--design-line)}
.needhelp-app .list-heading{padding-block:20px 10px}
.needhelp-app .list-heading h1{font-size:20px;letter-spacing:.015em;line-height:1.5}
.needhelp-app .compact-card{background:#fff;border:1px solid #d9e1df;border-radius:18px;padding:18px;box-shadow:var(--design-shadow);margin-bottom:12px}
.needhelp-app .compact-card.active{border-color:var(--design-help);box-shadow:inset 4px 0 var(--design-help),var(--design-shadow)}
.needhelp-app .compact-card.person.active{border-color:var(--design-offer);box-shadow:inset 4px 0 var(--design-offer),var(--design-shadow)}
.needhelp-app .compact-heading .task-focus{font-size:18px;line-height:1.5}
.needhelp-app .compact-footer{border-top:1px solid #edf0ed;padding-top:10px;margin-top:12px}
.needhelp-app :is(.map-actions button,.map-caption,.mobile-map-bar){border:1px solid #d6dfdf;box-shadow:0 4px 16px #20354b16;border-radius:14px}
.needhelp-app .map-actions button{min-height:48px;font-size:14px;background:#fff}
.needhelp-app .leaflet-popup-content-wrapper{border-radius:18px;box-shadow:0 12px 36px #20354b26}
.needhelp-app>footer{background:#fffdf9;border-color:var(--design-line)}
.needhelp-app dialog:not(#photo-view),.needhelp-admin dialog{border:1px solid #dbe3e1;border-radius:24px;background:#fff;box-shadow:0 24px 80px #162c453d}
.needhelp-app dialog::backdrop,.needhelp-admin dialog::backdrop{background:#152b426b;backdrop-filter:blur(4px)}
.needhelp-app #compose{padding:26px;--publication-color:var(--design-help)}
.needhelp-app #compose[data-kind=person]{--publication-color:var(--design-offer)}
.needhelp-app #compose .dialog-head{padding-bottom:14px;border-bottom:1px solid #e4e9e5}
.needhelp-app #compose .dialog-head h2{font-size:23px;letter-spacing:.02em}
.needhelp-app #compose .dialog-head button{width:48px;min-height:48px;border-radius:50%;background:#f0f3f1;color:#20354b}
.needhelp-app #wizard-position{margin:18px 0 10px;font-weight:600;letter-spacing:.025em}
.needhelp-app #wizard-progress{gap:6px;padding:5px;background:#f0f3f1;border-radius:16px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.needhelp-app #wizard-progress button{min-width:0;min-height:48px;padding:8px 3px;border:0;background:transparent;color:#46596a;font-size:14px;border-radius:11px;white-space:normal}
.needhelp-app #wizard-progress [aria-current=step]{background:#20354b;color:#fff;box-shadow:0 2px 7px #20354b18}
.needhelp-app #wizard-heading{font-size:26px;line-height:1.4;margin:24px 0 20px;font-weight:750;letter-spacing:.015em}
.needhelp-app #compose [data-publication-step]{padding-block:0 18px}
.needhelp-app #compose :is(input:not([type=checkbox]):not([type=radio]),textarea,select){padding:13px 14px;line-height:1.5;background:#fff;border-color:#a9b9bf;font-size:18px}
.needhelp-app #compose textarea{min-height:120px}
.needhelp-app #compose :is(label,legend){color:#20354b;font-size:16px}
.needhelp-app #compose .publication-type-options{gap:12px}
.needhelp-app #compose .publication-type-options span{min-height:92px;padding:20px 16px;border-radius:18px;font-size:20px;border-color:#c4d1d2}
.needhelp-app #compose .publication-type-options label:has([value=job]) span{background:#fff7ef;color:#843a12}
.needhelp-app #compose .publication-type-options label:has([value=person]) span{background:#edf7f3;color:#145c54}
.needhelp-app #compose .publication-type-options input:checked+span{background:var(--publication-color);border-color:var(--publication-color);color:white;box-shadow:0 6px 16px #20354b18}
.needhelp-app #compose :is(#wizard-photos,#publication-extra,#publication-rules-info){background:#f5f6f2;border:1px solid #e1e7e1;border-radius:14px;padding:4px 14px;margin-block:16px}
.needhelp-app #compose summary{font-size:16px;line-height:1.5;min-height:48px}
.needhelp-app #choose-location{border:2px solid #20354b;background:#20354b;color:white;font-weight:700;text-align:center;min-height:56px;border-radius:14px}
.needhelp-app #choose-location:hover{background:#304d68}
.needhelp-app .wizard-duration-choices button{min-height:64px;border:1px solid #b9c7c7;border-radius:14px;font-size:18px;background:#fff}
.needhelp-app .wizard-duration-choices [aria-pressed=true]{border:2px solid var(--publication-color);background:#f4f5ef;color:#20354b;box-shadow:inset 0 -4px var(--publication-color)}
.needhelp-app #compose #wizard-end{padding:12px 14px;border-radius:12px;background:#edf4ef;color:#254b40;font-size:16px}
.needhelp-app .wizard-summary-item{padding:16px;background:#f6f7f3;border:1px solid #e1e6df;border-radius:14px;margin-bottom:10px}
.needhelp-app .wizard-summary-item p{margin-bottom:0;font-size:17px}
.needhelp-app #compose .publication-submit-bar{border-top:1px solid #d9e2dc;padding-top:16px}
.needhelp-app .wizard-navigation button{min-height:52px;border-radius:14px;font-size:17px}
.needhelp-app .wizard-navigation button:last-child{background:#20354b;color:white;border-color:#20354b}
.needhelp-app #compose #submit-post{min-height:54px;border-radius:14px;font-size:18px}
.needhelp-app #pick-hint{background:#20354b;border:1px solid #fff8;border-radius:16px;padding:12px 16px;font-size:16px;box-shadow:0 6px 20px #20354b20}
.needhelp-app #pick-actions{width:min(540px,calc(100% - 24px));max-width:calc(100% - 24px);display:flex;flex-wrap:wrap;padding:12px;gap:8px;border:1px solid #d6dfdf;border-radius:20px;background:#fff;box-shadow:0 10px 36px #20354b35;bottom:max(30px,env(safe-area-inset-bottom))}
.needhelp-app #pick-actions button{min-height:48px;font-size:16px;white-space:normal;min-width:0;flex:1 1 120px}
.needhelp-app #pick-actions #confirm-pick{flex-basis:100%;min-height:56px;background:#096e64;border:2px solid #096e64;color:white;font-weight:750;font-size:18px}
.needhelp-app #pick-actions #confirm-pick:hover{background:#07594f}
.needhelp-app #pick-actions #pick-again,.needhelp-app #pick-actions #pick-center{background:#f4f6f3;color:#20354b;border-color:#c4d0d0}
.public-profile-page .page-header{background:#fffdf9;border-bottom:1px solid var(--design-line)}
.public-profile-page .profile-panel{background:#fff;border:1px solid var(--design-line);border-radius:24px;padding:28px;box-shadow:var(--design-shadow)}
.public-profile-page .profile-heading h1{color:#20354b;font-size:28px;letter-spacing:.02em}
.public-profile-page .section-heading{margin-top:32px}
.public-profile-page .profile-grid>article{border-radius:18px;border-color:var(--design-line);box-shadow:var(--design-shadow)}
.needhelp-admin>header{border-bottom:1px solid var(--design-line);padding-block:28px}
.needhelp-admin h1{font-size:30px;letter-spacing:.02em}
.needhelp-admin .stats p{border:1px solid var(--design-line);border-radius:18px;padding:20px;box-shadow:var(--design-shadow)}
.needhelp-admin .stats strong{font-size:34px;color:#20354b}
.needhelp-admin :is(.item,#admin-gate){border-color:var(--design-line);border-radius:18px;padding:24px;box-shadow:var(--design-shadow)}
.needhelp-admin #admin-tabs{background:#e9eeea;padding:8px;border-radius:18px;gap:6px}
.needhelp-admin #admin-tabs button{min-height:48px;border-color:transparent;background:transparent;font-size:16px}
.needhelp-admin #admin-tabs [aria-pressed=true]{background:#20354b;color:#fff;border-radius:12px}
.needhelp-admin :is(input:not([type=checkbox]):not([type=radio]),select,button){min-height:48px}
.needhelp-admin :is(input,select,textarea){font-size:16px}
@media(max-width:720px){
 .needhelp-app>header{padding:10px;gap:8px}
 .needhelp-app>header .brand strong{font-size:16px}
 .needhelp-app>header>.view-switch button{min-height:44px;padding-inline:7px;font-size:14px}
 .needhelp-app #mobile-menu-open{min-height:48px;font-size:14px;padding-inline:8px}
 .needhelp-app>header .header-right>#publish{min-height:48px;font-size:16px;border-radius:12px}
 .needhelp-app .search-panel{padding:10px}
 .needhelp-app .primary-controls{grid-template-columns:112px minmax(0,1fr) auto;gap:8px}
 .needhelp-app .primary-controls>.tabs button{min-height:48px;font-size:16px;border-radius:12px}
 .needhelp-app .primary-controls select#radius{font-size:16px;padding-inline:8px}
 .needhelp-app .primary-controls>#toggle-filters{font-size:14px;padding-inline:8px}
 .needhelp-app .map-actions button{min-height:48px;font-size:14px;padding:8px 10px}
 .needhelp-app .compact-card{padding:16px;border-radius:16px}
 .needhelp-app #compose{padding:18px;border-radius:22px}
 .needhelp-app #compose .dialog-head{top:-18px;padding-top:8px;padding-bottom:10px;background:white}
 .needhelp-app #wizard-heading{font-size:24px;margin:20px 0 16px}
 .needhelp-app #wizard-progress button{font-size:13px;min-height:48px}
 .needhelp-app #compose .publication-type-options span{min-height:84px;font-size:20px}
 .needhelp-app #pick-hint{font-size:15px;padding:10px 12px}
 .needhelp-app #pick-actions{padding:10px;bottom:max(24px,env(safe-area-inset-bottom))}
 .needhelp-admin :is(.item,#admin-gate),.public-profile-page .profile-panel{padding:18px}
 .needhelp-admin .stats p{padding:14px 10px}
 .needhelp-admin .stats strong{font-size:28px}
}
@media(max-width:360px){.needhelp-app>header .brand strong{font-size:14px}.needhelp-app .primary-controls{grid-template-columns:104px minmax(0,1fr) auto}.needhelp-app .map-actions{flex-wrap:wrap;justify-content:flex-end}.needhelp-app #wizard-progress{gap:2px;padding:3px}.needhelp-app #wizard-progress button{font-size:12px}}
@media(max-height:560px) and (max-width:1024px){.needhelp-app #pick-actions{width:min(580px,calc(100% - 24px));bottom:20px;padding:8px}.needhelp-app #pick-actions #confirm-pick{flex-basis:160px;min-height:48px}.needhelp-app #pick-hint{padding-block:6px}}
html[data-dialog-keyboard] .needhelp-app #wizard-progress{display:none}
html[data-dialog-keyboard] .needhelp-app #compose textarea{min-height:104px}
@media(prefers-reduced-motion:reduce){:is(.needhelp-app,.needhelp-admin,.public-profile-page) :is(button,a){transition:none;animation:none}}
.needhelp-app .wizard-duration-choices{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.needhelp-app #account .private-account{padding:16px;margin:20px 0;background:#edf3f0;border:1px solid #c8dad1;border-radius:16px}
.needhelp-app #account .private-account .small{display:block;margin:0 0 6px;color:#385747;font-size:14px}
.needhelp-app #account .private-account strong{color:#20354b;font-size:17px;line-height:1.5}
.needhelp-app #account .account-preview{padding:16px 0;border-bottom:1px solid #e1e7e1;margin-bottom:18px}
.needhelp-app #account :is(input,select){min-height:48px;font-size:17px}
.needhelp-app #account .account-save{margin-top:20px}
.needhelp-app #account #save-public-profile{min-height:52px;background:#20354b;color:white;border-color:#20354b;font-size:17px}
.needhelp-app #account .account-links{display:flex;flex-wrap:wrap;gap:10px;padding-top:16px}
@media(max-width:520px){.needhelp-app .wizard-duration-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}

.needhelp-app #pick-actions #confirm-pick:disabled{background:#e6ece8;border-color:#c8d4ce;color:#5c6d64;opacity:1}
.needhelp-app .compact-card{padding:18px!important}
.needhelp-app .compact-heading h2{font-size:18px!important}
@media(max-width:720px){.needhelp-app .compact-card{padding:16px!important}}

.needhelp-app>header{box-shadow:0 2px 12px #20354b05;position:relative;z-index:700}
.needhelp-app .header-right>button:not(#publish){background:transparent;border-color:transparent}
.needhelp-app .header-right>button:not(#publish):hover{background:#eaf0ec}
.needhelp-app .search-panel{background:#eaf0ec}
.needhelp-app .primary-controls>label{font-size:14px;color:#52647b}
.needhelp-app .list-heading #count{padding:5px 9px;border-radius:20px;background:#e5ece6;color:#425b50;font-size:13px}
.needhelp-app .list-sort{font-size:14px;color:#52647b}
.needhelp-app .list-sort select{min-height:48px;font-size:16px}
.needhelp-app .compact-card .countdown{background:#f0f4ef;color:#425b50;border-radius:8px;padding:4px 7px}
.needhelp-app .compact-heading .task-focus{min-height:48px}
.needhelp-app .compact-footer :is(.publisher,.interest-button,.card-expand){min-height:48px}
.needhelp-app .compact-footer :is(.interest-button,.card-expand){min-width:48px}
.needhelp-app .map-actions :is(#map-theme,#locate){height:48px;min-height:48px;border-color:#d6dfdf;border-radius:14px;box-shadow:0 4px 16px #20354b16}
.needhelp-app .map-actions #locate{width:auto;min-width:120px;max-width:none;flex:0 0 auto;padding-inline:14px;white-space:nowrap}
.needhelp-app .map-actions #map-theme{background-position:calc(100% - 16px) 21px,calc(100% - 12px) 21px}
.needhelp-app.list-mode #list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px;padding:4px 24px 24px;align-items:start;align-content:start}
.needhelp-app.list-mode #list>.compact-card{display:flex;flex-direction:column;align-items:stretch;grid-template-columns:none;grid-template-areas:none;gap:0;margin:0;padding:18px!important;border:1px solid #d6dfdf;border-left:4px solid #a83f0d;border-radius:20px;background:#fff;box-shadow:var(--design-shadow)}
.needhelp-app.list-mode #list>.compact-card.person{border-left-color:#096e64}
.needhelp-app.list-mode #list>.compact-card.active{background:#fffaf6}
.needhelp-app.list-mode #list>.compact-card.person.active{background:#f4faf7}
.needhelp-app.list-mode #list .compact-heading{display:flex;align-items:flex-start;gap:10px}
.needhelp-app.list-mode #list .compact-heading h2{font-size:18px!important;flex:1;min-width:0}
.needhelp-app.list-mode #list .compact-heading .countdown{margin:0;flex:none}
.needhelp-app.list-mode #list .compact-location{margin:8px 0}
.needhelp-app.list-mode #list .compact-location .task-location{font-size:14px;min-height:48px}
.needhelp-app.list-mode #list .compact-facts{flex-direction:row;flex-wrap:wrap;gap:8px;font-size:14px}
.needhelp-app.list-mode #list .compact-footer{padding-top:12px;margin-top:12px}
.needhelp-app.list-mode #list .compact-detail{margin-top:12px}
.needhelp-app #compose[data-kind=job] .wizard-duration-choices [aria-pressed=true]{background:#fff1e6;box-shadow:none}
.needhelp-app #compose[data-kind=person] .wizard-duration-choices [aria-pressed=true]{background:#eaf6f0;box-shadow:none}
.needhelp-app .wizard-summary-item{border:0;border-bottom:1px solid #d6dfdf;border-radius:0;background:#f5f7f3;margin:0;padding:16px}
.needhelp-app .wizard-summary-item:first-child{border-radius:16px 16px 0 0}
.needhelp-app .wizard-summary-item:last-child{border-bottom:0;border-radius:0 0 16px 16px}
.needhelp-app #account .account-preview{display:flex;align-items:center;gap:14px}
.needhelp-app #account .private-account strong{display:block;overflow-wrap:anywhere}
.needhelp-admin .item.user-item{padding:0;overflow:hidden}
.needhelp-admin .user-item>summary{min-height:64px;padding:16px 20px;gap:12px}
.needhelp-admin .user-item .user-detail{padding:0 20px 20px}
.needhelp-admin .user-item .user-identity{min-width:0}
.needhelp-admin .user-item .user-identity .meta{overflow-wrap:anywhere}
@media(min-width:1101px){
 .needhelp-app:not(.picking):not(.list-mode)>main{display:grid;padding:16px;gap:16px;grid-template-columns:clamp(320px,29vw,420px) minmax(0,1fr)}
 .needhelp-app:not(.picking):not(.list-mode) #results-panel{display:flex;border:1px solid #d6dfdf;border-radius:20px;overflow:hidden;background:#f8faf6}
 .needhelp-app:not(.picking):not(.list-mode) .map-region{border:1px solid #d6dfdf;border-radius:20px;overflow:hidden}
 .needhelp-app.sidebar-collapsed:not(.picking):not(.list-mode)>main{grid-template-columns:minmax(0,1fr)}
 .needhelp-app.sidebar-collapsed:not(.picking):not(.list-mode) #results-panel{display:none}
}
@media(max-width:720px){
 .needhelp-app>header{padding:8px 10px;gap:6px}
 .needhelp-app>header>.view-switch button{min-height:48px}
 .needhelp-app .search-panel{padding:8px 10px}
 .needhelp-app .primary-controls{gap:6px 8px}
 .needhelp-app.list-mode #list{grid-template-columns:minmax(0,1fr);gap:12px;padding:4px 10px 16px}
 .needhelp-app.list-mode #list>.compact-card{border-radius:16px;padding:16px!important}
 .needhelp-app .map-actions #locate{width:auto;min-width:112px;max-width:none;padding-inline:10px}
 .needhelp-app #compose{padding:16px}
 .needhelp-app #compose .dialog-head{top:-16px}
 .needhelp-admin .user-item>summary{padding:12px 14px;gap:8px}
 .needhelp-admin .user-item .user-detail{padding:0 14px 14px}
}
html[data-dialog-keyboard] .needhelp-app #wizard-heading{font-size:20px;margin:12px 0;line-height:1.4}
html[data-dialog-keyboard] .needhelp-app #compose [data-publication-step]{padding-bottom:8px}