body{
  background:#000;
  overflow-x:hidden;
  font-family:sans-serif;
  -webkit-text-size-adjust:100%;
}

*{
  box-sizing:border-box;
}

html,
body{
  width:100%;
  max-width:100%;
}

img,
video{
  max-width:100%;
}

input,
select,
textarea,
button{
  font-size:16px;
  min-width:0;
}

button,
a{
  overflow-wrap:anywhere;
}

#signupCompanyBtn{
  line-height:1.2;
  min-height:64px;
  text-align:center;
}

.siteHeaderInner{
  flex-wrap:wrap;
}

.brandLink{
  flex:1 1 280px;
  min-width:240px;
  max-width:100%;
}

.brandText h1{
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:normal;
}

.brandText p{
  overflow-wrap:normal;
}

.headerActions{
  flex:0 1 auto;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.headerActions button{
  white-space:nowrap;
}

#mobileProfileBtn,
#mobileCompanyProfileBtn{
  background:#2563eb !important;
  border-color:#2563eb !important;
  color:#fff !important;
}

.companyProfilePopup{
  display:none;
}

.companyProfilePopup.is-open{
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:none !important;
  margin:0 !important;
  padding:18px;
  background:rgba(0,0,0,.78);
}

.companyProfilePopup.is-open > .glass{
  width:min(760px, 100%);
  max-height:min(86vh, 860px);
  overflow-y:auto;
}

section:has(> #authSection.hidden):has(> #workerDashboard.hidden){
  display:none;
}

@media (min-width: 768px){
  .siteHeaderInner{
    padding-top:7px !important;
    padding-bottom:7px !important;
    gap:10px !important;
  }

  .brandLink{
    gap:10px !important;
  }

  .brandLink img{
    width:44px !important;
    height:44px !important;
    border-radius:12px !important;
  }

  .brandText h1{
    font-size:32px !important;
  }

  .brandText p{
    font-size:12px;
    margin-top:1px !important;
  }

  .headerActions{
    gap:8px !important;
  }

  .headerActions button{
    padding:7px 12px !important;
    font-size:13px;
  }

  main{
    padding-top:0 !important;
  }

  main > section:first-child{
    padding-top:1rem !important;
    padding-bottom:3rem !important;
  }

  #inboxBtn{
    order:1;
    background:#22c55e !important;
    border-color:#22c55e !important;
    color:#050505 !important;
    min-width:170px;
    min-height:42px;
    padding-left:28px !important;
    padding-right:28px !important;
    font-weight:900;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  #mobileCompanyProfileBtn{
    order:2;
  }

  #enableNotificationsBtn{
    background:#18181b !important;
    border:1px solid #3f3f46 !important;
    border-color:#3f3f46 !important;
    color:#fff !important;
    width:150px;
    padding-left:10px !important;
    padding-right:10px !important;
    font-size:12px !important;
    line-height:1.05 !important;
    white-space:normal;
    font-weight:900;
  }

  .companyMobileNotifications{
    display:none !important;
  }

body:has(#inboxModal:not(.hidden)) #candidateViewControls,
body:has(#chatModal:not(.hidden)) #candidateViewControls,
body:has(#videoModal:not(.hidden)) #candidateViewControls,
body:has(#candidateBioModal) #candidateViewControls,
body:has(#candidatePhotoModal) #candidateViewControls,
body:has(#candidateVideoPreviewModal) #candidateViewControls,
body:has(.jobface-live-popup) #candidateViewControls,
body:not(.candidate-section-active) #candidateViewControls{
  display:none !important;
}

#candidateBioModal > div{
  width:min(92vw, 680px);
  max-width:680px;
  max-height:calc(100dvh - 48px);
  overflow-y:auto;
}

#candidateBioModal .bioText{
  overflow-wrap:anywhere;
}

#candidatePhotoModal > div{
  max-height:calc(100dvh - 48px);
  overflow-y:auto;
}

#candidatePhotoModal .candidateFullPhoto{
  max-height:calc(100dvh - 150px);
}

#candidateVideoPreviewModal .candidateVideoModalPanel{
  width:min(92vw, 920px);
  max-height:calc(100dvh - 48px);
  overflow-y:auto;
}

#candidateVideoPreviewModal .candidateVideoFull{
  max-height:calc(100dvh - 150px);
  object-fit:contain;
}

  #candidateViewControls{
    position:fixed;
    right:14px;
    bottom:14px;
    z-index:55;
    padding:9px;
    border:1px solid rgba(63,63,70,.9);
    border-radius:14px;
    background:rgba(24,24,27,.92);
    backdrop-filter:blur(14px);
    box-shadow:0 12px 34px rgba(0,0,0,.32);
    gap:8px !important;
  }

  #candidateViewControls button{
    min-width:44px;
    min-height:40px;
    padding:10px 14px !important;
    border-radius:13px !important;
    font-size:14px;
    line-height:1.1;
  }

  #profiles:not(.desktop-swipe){
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:18px !important;
    max-width:980px;
  }

  #profiles{
    margin-top:42px;
  }

  main > section:has(#profiles.desktop-swipe){
    padding-bottom:0;
  }
}

@media (min-width: 1280px){
  #profiles:not(.desktop-swipe){
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    max-width:1180px;
  }

  #profiles.desktop-swipe{
    max-width:381px;
  }

  #profiles.desktop-swipe{
    min-height:0;
    align-items:flex-start;
    margin-top:42px;
    padding-top:0;
    padding-bottom:0;
  }
}

.glass{
  backdrop-filter:blur(14px);
  background:rgba(24,24,27,0.78);
}

#workerDashboard.worker-profile-modal{
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow-y:auto;
  padding:24px 16px;
  background:rgba(0,0,0,0.78);
}

#workerDashboard.worker-profile-modal.hidden{
  display:none !important;
}

#workerDashboard.worker-profile-modal > div{
  width:min(720px, 100%);
  margin:clamp(18px, 5vh, 54px) auto;
}

.saved-worker-card{
  min-width:0;
}

.saved-worker-photo{
  width:96px;
  height:96px;
  background:#18181b;
  border:4px solid #fff;
  border-radius:18px !important;
}

.hide-scrollbar::-webkit-scrollbar{
  display:none;
}

video::-webkit-media-controls{
  opacity:.9;
}

.mediaSwitch{
  width:58px;
  height:34px;
  border-radius:999px;
  background:#27272a;
  border:1px solid #3f3f46;
  padding:3px;
  flex-shrink:0;
  transition:background .18s ease,border-color .18s ease;
}

.mediaSwitch span{
  display:block;
  width:26px;
  height:26px;
  border-radius:999px;
  background:#fff;
  transition:transform .18s ease;
}

.workerMediaToggleInput:checked + .mediaSwitch{
  background:#22c55e;
  border-color:#22c55e;
}

.workerMediaToggleInput:checked + .mediaSwitch span{
  transform:translateX(24px);
}

.profileNotificationsButton.notification-enabled .notificationSettingText,
#profileNotificationsBtn.notification-enabled .notificationSettingText{
  background:#22c55e;
  border-color:#22c55e;
  color:#050505;
}

#profiles .candidateHeroPhoto{
  height:230px;
  cursor:pointer;
}

#profiles .profilePhoto{
  width:64px;
  height:64px;
  flex:0 0 64px;
  cursor:pointer;
  border-radius:18px !important;
}

#profiles .candidateVideoPreviewBtn{
  position:relative;
  display:block;
  padding:0 !important;
  line-height:0;
  flex-shrink:0;
  border-radius:18px !important;
}

#profiles .candidateVideoPreviewBtn video{
  display:block;
  width:100%;
  height:100% !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  border-radius:inherit;
}

#profiles .candidatePlayOverlay{
  position:absolute;
  left:50%;
  top:50%;
  width:42px;
  height:42px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  box-shadow:0 8px 20px rgba(0,0,0,.35);
  transform:translate(-50%, -50%);
  pointer-events:none;
}

#profiles .candidatePlayOverlay::before{
  content:"";
  position:absolute;
  left:17px;
  top:11px;
  border-left:14px solid #000;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
}

#profiles .candidate-card{
  border-radius:22px !important;
}

#profiles .candidate-card-content{
  padding:8px !important;
}

#profiles .candidate-info{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-bottom:6px;
  min-width:0;
}

#profiles .candidate-main-row{
  display:flex;
  flex-wrap:wrap;
  column-gap:10px;
  row-gap:8px;
  align-items:center;
  min-width:0;
}

#profiles h4{
  font-size:20px !important;
  line-height:1.08 !important;
  overflow-wrap:anywhere;
}

#profiles .candidate-main-row .name{
  flex:0 0 100%;
}

#profiles .saveWorkerBtn{
  width:auto !important;
  padding:7px 12px !important;
  font-size:12px !important;
  line-height:1.2;
  white-space:nowrap;
}

#profiles .city{
  margin-top:0 !important;
  font-size:13px;
  white-space:nowrap;
}

#profiles .candidate-contact{
  margin-bottom:3px !important;
  font-size:11px;
}

#profiles .candidate-contact > div{
  padding:4px 7px !important;
  border-radius:12px !important;
}

#profiles .mediaLinks{
  gap:6px !important;
}

#profiles .mediaLinks a{
  padding:6px 8px !important;
  font-size:12px !important;
}

#profiles .candidate-actions{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:6px;
  margin-top:4px !important;
}

#profiles .candidate-actions button{
  padding:8px 9px !important;
  font-size:12px !important;
  line-height:1.15;
}

#profiles .candidate-actions button + button{
  margin-top:0;
}

#profiles .category,
#profiles .skills{
  padding:6px 10px !important;
  font-size:12px !important;
}

#profiles .bioBtn{
  padding:6px 12px !important;
  font-size:12px !important;
  background:#fff !important;
  color:#000 !important;
}

#profiles.desktop-swipe{
  display:flex !important;
  grid-template-columns:none !important;
  max-width:481px;
  overflow-x:auto;
  overflow-y:visible;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:0;
  margin-left:auto;
  margin-right:auto;
}

#profiles.desktop-swipe .candidateHeroPhoto{
  height:205px;
}

#profiles.desktop-swipe .candidate-card-content{
  padding:8px !important;
}

#profiles.desktop-swipe > div{
  flex:0 0 100%;
  scroll-snap-align:center;
}

#profiles.desktop-swipe::-webkit-scrollbar{
  display:none;
}

#profiles.desktop-swipe{
  scrollbar-width:none;
}

@media (min-width: 1280px){
  #profiles.desktop-swipe{
    max-width:381px;
  }
}

@media (max-width: 767px){
  .siteHeaderInner{
    align-items:flex-start !important;
    flex-direction:column;
    gap:9px;
    padding:10px 12px 12px !important;
  }

  .brandLink{
    flex:1 1 auto;
    min-width:0;
    width:100%;
  }

  header h1{
    font-size:26px !important;
    line-height:1;
  }

  header p{
    font-size:11px;
    line-height:1.2;
    margin-top:2px !important;
  }

  .headerActions{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    width:100%;
    gap:6px;
  }

  header button{
    width:100%;
    min-height:44px;
    padding:9px 10px !important;
    border-radius:12px !important;
    font-size:13px;
    line-height:1.15;
  }

  header img{
    width:44px !important;
    height:44px !important;
    border-radius:14px !important;
  }

  #enableNotificationsBtn{
    display:none !important;
    order:1;
    font-size:12px !important;
    padding-left:5px !important;
    padding-right:5px !important;
    letter-spacing:0 !important;
    line-height:1.05 !important;
    white-space:normal;
    word-break:normal;
    background:#18181b !important;
    border:1px solid #3f3f46 !important;
    border-color:#3f3f46 !important;
    color:#fff !important;
  }

  body.jobface-company-account #enableNotificationsBtn,
  body.jobface-company-account #enableNotificationsBtn:not(.hidden){
    display:none !important;
  }

  #mobileCompanyProfileBtn{
    order:1;
    line-height:1.05 !important;
    white-space:normal;
  }

  body.jobface-company-account #mobileCompanyProfileBtn:not(.hidden){
    display:block !important;
  }

  #hideProfileBtn{
    order:2;
  }

  #mobileProfileBtn{
    order:1;
  }

  #logoutBtn{
    order:3;
  }

  #installAppBtn{
    order:2;
  }

  #inboxBtn{
    grid-column:1 / -1;
    order:20;
    min-height:52px;
    font-size:17px !important;
    background:#22c55e !important;
    border-color:#22c55e !important;
    color:#050505 !important;
  }

  #candidateSwipeHint{
    display:block !important;
    max-width:280px;
    font-size:13px;
    line-height:1.35;
  }

  main{
    width:100%;
    max-width:100%;
    padding:18px 12px 28px !important;
  }

  main > section:has(#profiles){
    scroll-margin-top:178px;
  }

  main > section:has(#profiles) > div:first-child{
    margin-bottom:8px !important;
  }

  main > section:first-child{
    padding-top:34px !important;
    padding-bottom:34px !important;
  }

  main > section:first-child h2{
    font-size:34px !important;
    line-height:1.05 !important;
    overflow-wrap:break-word;
  }

  main > section:first-child p{
    font-size:16px !important;
    line-height:1.55;
    margin-top:20px !important;
  }

  .glass{
    border-radius:22px !important;
  }

  #authSection,
  #workerDashboard > div,
  #companyDashboard > div,
  #companyOnly .glass{
    padding:20px !important;
  }

  h3{
    font-size:26px !important;
    line-height:1.1 !important;
  }

  input,
  select,
  textarea{
    width:100%;
    border-radius:16px !important;
    padding:14px 16px !important;
  }

  textarea{
    min-height:120px !important;
  }

  #authSection .grid.grid-cols-2,
  #workerDashboard .grid.grid-cols-2,
  #profiles .grid.grid-cols-2{
    grid-template-columns:1fr !important;
  }

  #profilePreview,
  #videoPreview{
    height:auto !important;
    min-height:220px;
    aspect-ratio:4 / 3;
    border-radius:20px !important;
  }

  #profiles{
    gap:14px !important;
  }

  #candidateViewControls{
    display:none !important;
  }

  #profiles.candidate-swipe{
    display:flex !important;
    grid-template-columns:none !important;
    max-width:100%;
    margin-left:0;
    margin-right:0;
    overflow-x:auto;
    overflow-y:visible;
    scroll-snap-type:x mandatory;
    scroll-padding:0 12px;
    -webkit-overflow-scrolling:touch;
    padding:0 6px 16px;
  }

  #profiles.candidate-swipe > div{
    flex:0 0 min(94vw, 420px);
    scroll-snap-align:center;
  }

  #profiles > div{
    border-radius:22px !important;
  }

  #profiles .candidateHeroPhoto{
    height:auto !important;
    aspect-ratio:1 / 1;
    max-height:none;
  }

  body.jobface-worker-account #profiles .candidateHeroPhoto,
  body.jobface-company-account #profiles .candidateHeroPhoto{
    aspect-ratio:6 / 5;
  }

  #profiles .p-7{
    padding:10px !important;
  }

  #profiles .candidate-card-content{
    padding:10px !important;
  }

  #profiles .candidate-actions{
    display:block;
  }

  #profiles .candidate-actions button + button{
    margin-top:12px;
  }

  #profiles .flex.items-center.gap-4{
    align-items:flex-start;
    gap:12px !important;
  }

  #profiles h4{
    font-size:20px !important;
    line-height:1.1 !important;
    overflow-wrap:anywhere;
  }

  #profiles .candidate-info{
    display:grid;
    grid-template-columns:64px minmax(0, 1fr);
    gap:10px;
    align-items:start;
    justify-content:start;
    width:100%;
    max-width:100%;
    margin-left:0;
    margin-right:0;
    transform:none;
  }

  #profiles .candidate-main-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    column-gap:10px;
    row-gap:7px;
    margin-left:0;
    min-width:0;
    max-width:100%;
  }

  #profiles .candidate-main-row .name{
    flex:0 0 100%;
    max-width:100%;
  }

  #profiles .profilePhoto{
    width:56px;
    height:56px;
    flex-basis:56px;
    border-width:2px !important;
    transform:none;
  }

  #profiles .candidatePlayOverlay{
    width:38px;
    height:38px;
  }

  #profiles .candidatePlayOverlay::before{
    left:15px;
    top:10px;
    border-left-width:13px;
    border-top-width:9px;
    border-bottom-width:9px;
  }

  #profiles .flex.items-center.gap-4{
    margin-bottom:8px !important;
  }

  #profiles .flex.flex-wrap.gap-3{
    gap:6px !important;
    margin-top:8px !important;
    margin-bottom:8px !important;
  }

  #profiles .category,
  #profiles .skills{
    padding:7px 10px !important;
    font-size:12px !important;
  }

  #profiles .saveWorkerBtn{
    padding:7px 10px !important;
    font-size:12px !important;
    line-height:1.2;
  }

  #profiles .category{
    background:#27272a !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.12);
  }

  #profiles .bio{
    margin-bottom:6px !important;
    font-size:13px;
    line-height:1.3;
  }

  #profiles .candidate-contact{
    margin-bottom:6px !important;
  }

  #profiles .phone,
  #profiles .email,
  #profiles .skills,
  #profiles .bio{
    overflow-wrap:anywhere;
  }

  #profiles button,
  #profiles a{
    border-radius:14px !important;
    padding:9px 9px !important;
    font-size:13px !important;
  }

  #profiles .mediaLinks.grid.grid-cols-2{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
  }

  #profiles .mediaLinks a{
    padding:12px 8px !important;
    font-size:15px !important;
    border-radius:16px !important;
  }

  #chatModal > div{
    width:100% !important;
    height:100% !important;
    padding:14px !important;
  }

  #messages{
    height:52vh !important;
    border-radius:18px !important;
    padding:14px !important;
  }

  #messageInput{
    font-size:16px !important;
    padding:14px 16px !important;
    border-radius:18px !important;
  }

  #sendBtn,
  #videoBtn,
  #fullscreenBtn{
    padding:14px 12px !important;
    border-radius:18px !important;
    font-size:16px !important;
  }

  #inboxModal{
    align-items:stretch !important;
  }

  #inboxModal > div{
    width:100%;
    max-width:none;
    min-height:100dvh;
    border-radius:0 !important;
    padding:18px !important;
  }
}

#inboxModal > div{
  max-height:calc(100dvh - 48px);
  display:flex;
  flex-direction:column;
}

#inboxList{
  max-height:none !important;
  min-height:0;
  flex:1;
  overflow-y:auto;
  padding-bottom:32px;
}

#inboxList[data-active-tab="messages"] [data-inbox-panel="video"],
#inboxList[data-active-tab="video"] [data-inbox-panel="messages"]{
  display:none;
}

#inboxModal .inbox-tab-active{
  background:#22c55e !important;
  border-color:#22c55e !important;
  color:#050505 !important;
}

#inboxModal .inbox-tab[data-inbox-tab="video"]{
  background:#2563eb !important;
  border-color:#2563eb !important;
  color:#fff !important;
}

#inboxModal .inbox-tab{
  line-height:1.1;
  white-space:normal;
}

#inboxModal .inbox-section-heading{
  cursor:pointer;
}

#inboxModal .inbox-section{
  min-width:0;
}

#inboxModal .inbox-card{
  transition:border-color .2s ease, background .2s ease;
}

#inboxModal .inbox-card-unread{
  border-color:#22c55e !important;
  background:rgba(39,39,42,.96) !important;
}

.profileNotificationsButton,
#profileNotificationsBtn,
#companyNotificationsBtn{
  min-height:64px;
  overflow-wrap:normal;
  word-break:normal;
}

.profileNotificationsButton > span,
#profileNotificationsBtn > span,
#companyNotificationsBtn > span{
  width:100%;
}

.profileNotificationsButton > span > span:first-child,
#profileNotificationsBtn > span > span:first-child,
#companyNotificationsBtn > span > span:first-child{
  min-width:0;
}

.profileNotificationsButton .notificationSettingText,
#profileNotificationsBtn .notificationSettingText,
#companyNotificationsBtn .notificationSettingText{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:92px;
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:normal;
}

@media (max-width: 767px){
  .profileNotificationsButton > span,
  #profileNotificationsBtn > span,
  #companyNotificationsBtn > span{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:12px !important;
  }

  .profileNotificationsButton .notificationSettingText,
  #profileNotificationsBtn .notificationSettingText,
  #companyNotificationsBtn .notificationSettingText{
    min-width:max-content !important;
    white-space:nowrap !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    writing-mode:horizontal-tb !important;
  }
}