.agent-profile-brand {
  position: relative;
  cursor: pointer;
  border-radius: 12px;
  padding: 5px 8px 5px 5px;
  transition: background .18s ease, box-shadow .18s ease;
}

.agent-profile-brand:hover,
.agent-profile-brand:focus-visible {
  background: #f5f0e6;
  box-shadow: 0 0 0 2px rgba(200, 148, 66, .25);
  outline: none;
}

.agent-profile-brand .agent-edit-badge {
  position: absolute;
  left: 38px;
  bottom: 3px;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border: 2px solid #fffdf8;
  border-radius: 50%;
  background: #c89442;
  color: #172d24;
  font: 800 11px/1 Arial, sans-serif;
  box-shadow: 0 2px 6px rgba(23, 45, 36, .28);
}

.agent-profile-modal[hidden] { display: none !important; }
.agent-profile-modal {
  position: fixed;
  z-index: 15000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  font-family: var(--font-sans, Inter, Arial, sans-serif);
}

.agent-profile-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(10, 25, 19, .72);
  backdrop-filter: blur(4px);
}

.agent-profile-dialog {
  position: relative;
  width: min(620px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  border: 1px solid #ded8cc;
  border-radius: 20px;
  background: #fffdf8;
  color: #172d24;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .32);
}

.agent-profile-head {
  position: relative;
  padding: 24px 62px 19px 24px;
  border-bottom: 1px solid #e6ded1;
  background: linear-gradient(145deg, #fffdf8, #f5f0e6);
}

.agent-profile-head small {
  color: #a66e22;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: 10px;
  font-weight: 850;
}

.agent-profile-head h2 {
  margin: 5px 0 6px;
  font-size: 25px;
  line-height: 1.1;
}

.agent-profile-head p {
  margin: 0;
  color: #59665f;
  font-size: 12px;
  line-height: 1.5;
}

.agent-profile-close {
  position: absolute;
  top: 16px;
  right: 17px;
  width: 36px;
  height: 36px;
  border: 1px solid #d8d0c4;
  border-radius: 50%;
  background: #fff;
  color: #172d24;
  cursor: pointer;
  font-size: 25px;
  line-height: 1;
}

.agent-profile-form { padding: 23px 24px 24px; }

.agent-photo-editor {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 22px;
  padding: 16px;
  border: 1px solid #e1d9cc;
  border-radius: 14px;
  background: #faf7ef;
}

.agent-photo-editor > img {
  width: 104px;
  height: 104px;
  object-fit: cover;
  object-position: center;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 4px 18px rgba(23, 45, 36, .2);
}

.agent-photo-editor > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.agent-photo-editor input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.agent-photo-button,
.agent-photo-remove {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  padding: 0 13px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}

.agent-photo-button {
  background: #172d24;
  color: #fff;
}

.agent-photo-button:hover { background: #28483b; }
.agent-photo-remove {
  border: 1px solid #d7cfc2;
  background: #fff;
  color: #59665f;
}

.agent-photo-editor small {
  flex-basis: 100%;
  color: #68736e;
  font-size: 10px;
  line-height: 1.45;
}

.agent-profile-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.agent-profile-fields label span {
  display: block;
  margin: 0 0 6px;
  color: #365247;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 9px;
  font-weight: 850;
}

.agent-profile-fields input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #d8d0c4;
  border-radius: 10px;
  background: #fff;
  color: #172d24;
  padding: 10px 12px;
  outline: none;
}

.agent-profile-fields input:focus {
  border-color: #c89442;
  box-shadow: 0 0 0 3px rgba(200, 148, 66, .17);
}

.agent-profile-note,
.agent-profile-error {
  margin: 15px 0 0;
  font-size: 10px;
  line-height: 1.55;
}

.agent-profile-note { color: #68736e; }
.agent-profile-error {
  border-radius: 8px;
  background: #fff0ee;
  color: #a52d28;
  padding: 9px 11px;
  font-weight: 750;
}

.agent-profile-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.agent-profile-actions button {
  min-height: 44px;
  border-radius: 10px;
  padding: 0 17px;
  cursor: pointer;
  font-weight: 850;
}

.agent-profile-reset {
  border: 1px solid #d8d0c4;
  background: transparent;
  color: #59665f;
}

.agent-profile-save {
  border: 0;
  background: #c89442;
  color: #172d24;
}

.agent-profile-save:hover { background: #d5a456; }
body.agent-profile-open { overflow: hidden; }

@media (max-width: 640px) {
  .topbar .brand.agent-profile-brand b {
    display: block;
    max-width: 145px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
  }
  .agent-profile-dialog { border-radius: 16px; }
  .agent-profile-head { padding: 20px 55px 16px 18px; }
  .agent-profile-form { padding: 18px; }
  .agent-photo-editor { grid-template-columns: 78px minmax(0, 1fr); padding: 12px; }
  .agent-photo-editor > img { width: 78px; height: 78px; }
  .agent-profile-fields { grid-template-columns: 1fr; }
  .agent-profile-actions { flex-direction: column-reverse; }
  .agent-profile-actions button { width: 100%; }
}