.freelancer-app { background: #eef2f7; }
.freelancer-top { min-height: 88px; padding: 16px max(24px, calc((100% - 1180px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #fff; border-bottom: 1px solid #dfe5ee; box-shadow: 0 4px 20px #10213d0a; }
.freelancer-brand img { width: 215px; max-height: 55px; display: block; object-fit: contain; }
.freelancer-account { display: flex; align-items: center; gap: 18px; }
.freelancer-account > div { display: grid; border-inline-start: 1px solid #dfe5ee; padding-inline-start: 18px; }
.freelancer-account small { color: #69758a; }
.freelancer-account strong { font-size: 15px; }
.logout-button { display: inline-flex; align-items: center; gap: 8px; color: #b42318; background: #fff5f4; border-color: #fecdca; padding: 9px 12px; }
.logout-icon { font-size: 20px; line-height: 1; transform: scaleX(-1); }
.freelancer-container { margin-top: 26px; }
.freelancer-dashboard-actions { display: flex; justify-content: flex-end; margin: 0 0 22px; }
.freelancer-notice { display: grid; grid-template-columns: 38px 1fr auto; align-items: start; gap: 13px; margin: 0 0 14px; padding: 16px 18px; border: 1px solid; border-radius: 14px; box-shadow: 0 7px 22px #10213d0d; }
.freelancer-notice .notice-symbol { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 900; font-size: 20px; }
.freelancer-notice strong { display: block; margin-bottom: 3px; }
.freelancer-notice p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.notice-close { padding: 0; width: 34px; height: 34px; border: 0; background: transparent; font-size: 25px; line-height: 1; }
.notice-red { background: #fff3f2; border-color: #f7c7c3; color: #8f1d16; }.notice-red .notice-symbol { background: #d92d20; }.notice-green { background: #effbf4; border-color: #b7e4c7; color: #166534; }.notice-green .notice-symbol { background: #16a34a; }.notice-blue { background: #eff7ff; border-color: #bddbfa; color: #184f85; }.notice-blue .notice-symbol { background: #2878c7; }
:is(#new-job,#new-freelancer) { width: min(760px, calc(100% - 30px)); max-height: min(90dvh, 820px); overflow-y: auto; padding: 26px; border: 1px solid #ffffff80; background: #fff; box-shadow: 0 30px 90px #071a3673; opacity: 0; transform: translateY(18px) scale(.975); }
:is(#new-job,#new-freelancer)[open] { animation: job-modal-in .24s cubic-bezier(.2,.8,.2,1) forwards; }
:is(#new-job,#new-freelancer).is-closing { animation: job-modal-out .18s ease forwards; }
:is(#new-job,#new-freelancer)::backdrop { background: #071426b8; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); animation: job-backdrop-in .24s ease both; }
:is(#new-job,#new-freelancer).is-closing::backdrop { animation: job-backdrop-out .18s ease forwards; }
:is(#new-job,#new-freelancer) .dialog-head { padding-bottom: 15px; border-bottom: 1px solid #e6ebf1; }
:is(#new-job,#new-freelancer) .dialog-head h2 { margin: 5px 0; color: #10213d; }
:is(#new-job,#new-freelancer) .grid-form { gap: 18px; }
:is(#new-job,#new-freelancer) .grid-form > label { gap: 8px; color: #263b55; font-size: 14px; }
:is(#new-job,#new-freelancer) :is(input,select,textarea) { width: 100%; min-height: 47px; border: 1px solid #cfd9e5; background: #f9fbfd; box-shadow: inset 0 1px 2px #10213d08; transition: border-color .18s ease,background-color .18s ease,box-shadow .18s ease; }
:is(#new-job,#new-freelancer) textarea { min-height: 108px; resize: vertical; }
:is(#new-job,#new-freelancer) :is(input,select,textarea):hover { border-color: #9fb1c5; background: #fff; }
:is(#new-job,#new-freelancer) :is(input,select,textarea):focus { border-color: #08a7a6; background: #fff; box-shadow: 0 0 0 4px #08a7a619; outline: 0; }
:is(#new-job,#new-freelancer) input[type="file"] { min-height: 52px; padding: 8px; cursor: pointer; }
:is(#new-job,#new-freelancer) input[type="file"]::file-selector-button { margin-inline-end: 10px; padding: 8px 12px; border: 0; border-radius: 8px; background: #e8f7f5; color: #087f79; font: inherit; font-weight: 700; cursor: pointer; }
:is(#new-job,#new-freelancer) label > small { line-height: 1.7; }
:is(#new-job,#new-freelancer) .actions { justify-content: flex-end; padding-top: 4px; }
:is(#new-job,#new-freelancer) .actions button { min-width: 145px; }
@keyframes job-modal-in { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes job-modal-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(12px) scale(.985); } }
@keyframes job-backdrop-in { from { background: #07142600; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
@keyframes job-backdrop-out { to { background: #07142600; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }

@media (max-width: 700px) {
    .freelancer-top { min-height: 72px; padding: 11px 16px; gap: 10px; }
    .freelancer-brand img { width: 138px; }
    .freelancer-account { gap: 8px; }
    .freelancer-account > div { padding-inline-start: 8px; }
    .freelancer-account small { display: none; }
    .freelancer-account strong { max-width: 95px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
    .logout-button { padding: 8px; }
    .logout-button span:last-child { display: none; }
    .freelancer-container { margin-top: 14px; }
    .freelancer-dashboard-actions { margin-bottom: 14px; }
    .freelancer-notice { grid-template-columns: 32px 1fr auto; gap: 9px; padding: 13px 12px; border-radius: 12px; }.freelancer-notice .notice-symbol { width: 30px; height: 30px; font-size: 17px; }.notice-close { width: 30px; height: 30px; }
    :is(#new-job,#new-freelancer) { width: calc(100% - 20px); max-height: calc(100dvh - 20px); padding: 18px 15px; border-radius: 17px; }
    :is(#new-job,#new-freelancer) .grid-form { gap: 15px; }
    :is(#new-job,#new-freelancer) .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    :is(#new-job,#new-freelancer) .actions button { min-width: 0; width: 100%; }
}
@media(prefers-reduced-motion:reduce){:is(#new-job,#new-freelancer)[open],:is(#new-job,#new-freelancer).is-closing,:is(#new-job,#new-freelancer)::backdrop,:is(#new-job,#new-freelancer).is-closing::backdrop{animation-duration:.01ms}}