/* AI page header — authenticated user controls (dark theme) */
header.site {
  --display: "Poppins", system-ui, sans-serif;
}

header.site nav.main .ai-header-auth {

  display: flex;

  align-items: center;

  gap: 18px;

  flex-shrink: 0;

}



/* Open to Work pill (dark header context) */

header.site .otw-pill {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 5px 6px 5px 16px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.06);

  cursor: pointer;

}



header.site .otw-pill .lab {

  line-height: 1.18;

  text-align: right;

}



header.site .otw-pill .lab b {

  display: block;

  font-family: var(--display);

  font-weight: 700;

  font-size: 13px;

  color: #e2e8f0;

  white-space: nowrap;

}



header.site .otw-pill .lab span {

  display: block;

  font-size: 10.5px;

  color: #94a3b8;

  white-space: nowrap;

  margin-top: 1px;

}



header.site .otw-sw {

  position: relative;

  width: 54px;

  height: 28px;

  border-radius: 999px;

  flex: none;

  transition: background-color 0.2s;

  background-color: #16a34a;

  margin: 0;

  cursor: pointer;

}



header.site .otw-pill[data-on="false"] .otw-sw {

  background-color: #dc2626;

}



header.site .otw-sw .header-work-toggle-input {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  margin: 0;

  opacity: 0;

  cursor: pointer;

  z-index: 2;

}



header.site .otw-sw .yes {

  position: absolute;

  left: 9px;

  top: 50%;

  transform: translateY(-50%);

  font-family: var(--display);

  font-weight: 800;

  font-size: 9.5px;

  letter-spacing: 0.06em;

  color: #fff;

  pointer-events: none;

}



header.site .otw-sw .no {

  position: absolute;

  right: 9px;

  top: 50%;

  transform: translateY(-50%);

  font-family: var(--display);

  font-weight: 800;

  font-size: 9.5px;

  letter-spacing: 0.06em;

  color: #fff;

  display: none;

  pointer-events: none;

}



header.site .otw-pill[data-on="false"] .otw-sw .yes {

  display: none;

}



header.site .otw-pill[data-on="false"] .otw-sw .no {

  display: block;

}



header.site .otw-pill[data-on="false"] .otw-sw .knob {

  right: auto;

  left: 3px;

}



header.site .otw-sw .knob {

  position: absolute;

  top: 3px;

  right: 3px;

  width: 22px;

  height: 22px;

  border-radius: 50%;

  background: #fff;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);

  transition: left 0.2s, right 0.2s;

  pointer-events: none;

}



/* User chip (dark glass pill) */

header.site .ai-nav-user {

  position: relative;

}



header.site .ai-nav-user-toggle {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding: 5px 9px 5px 14px;

  margin: 0;

  border: 0;

  border-radius: 999px;

  background: #282d54;

  cursor: pointer;

  color: inherit;

  font: inherit;

  transition: background 0.15s, box-shadow 0.15s;

}



header.site .ai-nav-user-toggle:hover,

header.site .ai-nav-user.is-open .ai-nav-user-toggle {

  background: #30366a;

}



header.site .ai-nav-user.is-open .ai-nav-user-toggle {

  box-shadow: 0 6px 18px rgba(20, 25, 60, 0.22);

}



header.site .ai-nav-user .uinfo {

  line-height: 1.12;

  text-align: right;

}



header.site .ai-nav-user .uname {

  display: block;

  font-size: 14px;

  font-weight: 600;

  color: #fff;

}



header.site .ai-nav-user .urole {

  display: block;

  font-size: 11px;

  font-weight: 500;

  color: rgba(255, 255, 255, 0.6);

  margin-top: 1px;

}



header.site .ai-nav-user .av-wrap {

  position: relative;

  display: flex;

  flex: none;

}



header.site .ai-nav-user .ring {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  padding: 2.5px;

  background: conic-gradient(#16a34a 0 100%);

  display: flex;

  transition: background 0.2s;

}



header.site .ai-nav-user:not([data-otw]) .ring {

  background: conic-gradient(#64748b 0 100%);

}



header.site .ai-nav-user[data-otw="false"] .ring {

  background: conic-gradient(#dc2626 0 100%);

}



header.site .ai-nav-user .avatar {

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background: #fff;

  color: #282d54;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 700;

  font-size: 13px;

  border: 2px solid #282d54;

  overflow: hidden;

}



header.site .ai-nav-user .avatar img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  border-radius: 50%;

}



header.site .ai-nav-user .dot {

  position: absolute;

  right: -1px;

  bottom: -1px;

  width: 13px;

  height: 13px;

  border-radius: 50%;

  background: #16a34a;

  border: 2.5px solid #282d54;

  transition: background 0.2s;

}



header.site .ai-nav-user:not([data-otw]) .dot {

  background: #64748b;

}



header.site .ai-nav-user[data-otw="false"] .dot {

  background: #dc2626;

}



header.site .ai-nav-user .ucaret {

  width: 12px;

  height: 12px;

  color: rgba(255, 255, 255, 0.7);

  transition: transform 0.2s;

  flex: none;

}



header.site .ai-nav-user.is-open .ucaret {

  transform: rotate(180deg);

}



header.site .ai-nav-user-menu {

  display: none;

  position: absolute;

  top: calc(100% + 12px);

  right: 0;

  width: 248px;

  margin: 0;

  padding: 8px;

  list-style: none;

  background: linear-gradient(180deg, #2b3162, #222850);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 16px;

  box-shadow: 0 26px 60px rgba(10, 14, 40, 0.5);

  z-index: 120;

}



header.site .ai-nav-user.is-open .ai-nav-user-menu {

  display: block;

}



header.site .ai-nav-user-menu .mhead {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 11px 12px 13px;

}



header.site .ai-nav-user-menu .mhead .mav {

  width: 42px;

  height: 42px;

  flex: none;

  border-radius: 50%;

  background: #fff;

  color: #282d54;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 700;

  font-size: 14px;

}



header.site .ai-nav-user-menu .mhead .minfo {

  min-width: 0;

  flex: 1;

}



header.site .ai-nav-user-menu .mhead b {

  display: block;

  font-weight: 700;

  font-size: 14.5px;

  color: #fff;

}



header.site .ai-nav-user-menu .mhead span.memail {

  display: block;

  font-size: 11px;

  line-height: 1.35;

  color: rgba(255, 255, 255, 0.55);

  margin-top: 2px;

  word-break: normal;

  overflow-wrap: break-word;

}



header.site .ai-nav-user-menu .mhead span.mrole {

  display: block;

  font-size: 11px;

  font-weight: 500;

  color: rgba(255, 255, 255, 0.45);

  margin-top: 2px;

}



header.site .ai-nav-user-menu .sep {

  height: 1px;

  background: rgba(255, 255, 255, 0.08);

  margin: 4px 8px;

}



header.site .ai-nav-user-menu a {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 10px 12px;

  font-size: 14px;

  font-weight: 600;

  color: rgba(255, 255, 255, 0.86);

  text-decoration: none;

  border-radius: 9px;

  transition: color 0.12s, background 0.12s;

}



header.site .ai-nav-user-menu a .bi {

  font-size: 16px;

  line-height: 1;

  opacity: 0.85;

  flex: none;

  width: 18px;

  text-align: center;

}



header.site .ai-nav-user-menu a:hover {

  color: #fff;

  background: rgba(255, 255, 255, 0.06);

}



header.site .ai-nav-user-menu a.danger {

  color: #f87171;

}



header.site .ai-nav-user-menu a.danger:hover {

  color: #fca5a5;

  background: rgba(248, 113, 113, 0.1);

}



header.site .ai-header-auth--company .ai-post-job {

  white-space: nowrap;

}



@media (max-width: 900px) {

  header.site .otw-pill .lab {

    display: none;

  }



  header.site .ai-nav-user .uinfo {

    display: none;

  }



  header.site nav.main .ai-header-auth {

    gap: 12px;

  }

}



@media (max-width: 520px) {

  header.site .ai-header-auth--company .ai-post-job {

    display: none;

  }

}