#user-affinity-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,0.45);
  z-index:999;
}

#user-affinity-overlay.hidden,
#user-affinity-modal.hidden{
  display:none;
}

#user-affinity-modal{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:min(800px, calc(100vw - 60px));
  max-height:85vh;
  background:#fff;
  border-radius:12px;
  box-shadow:0 18px 45px rgba(15,23,42,0.2);
  display:flex;
  flex-direction:column;
  z-index:1000;
  overflow:hidden;
}

#user-affinity-modal .modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 24px;
  border-bottom:1px solid #e5e7eb;
}

#user-affinity-modal .user-affinity-prologue{
  padding:20px 24px 12px;
  background:linear-gradient(135deg, rgba(189,33,60,0.12), rgba(255,255,255,0));
  border-bottom:1px solid #f1f5f9;
  display:flex;
  flex-direction:column;
  gap:16px;
}

#user-affinity-modal .user-affinity-prologue[hidden]{
  display:none;
}

.user-affinity-prologue__title{
  margin:0;
  font-size:1.3rem;
  color:#7f1024;
}

.user-affinity-prologue__intro{
  margin:0;
  color:#4b5563;
  line-height:1.55;
}

.user-affinity-focus{
  margin:0;
  padding:16px;
  border:1px solid rgba(189,33,60,0.25);
  border-radius:12px;
  background-color:rgba(255,236,239,0.55);
}

.user-affinity-focus__legend{
  font-weight:600;
  color:#7f1024;
  margin-bottom:12px;
}

.user-affinity-focus__options{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.user-affinity-focus__option{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid transparent;
  background-color:#fff;
  color:#374151;
  box-shadow:0 6px 14px -12px rgba(189,33,60,0.45);
  transition:box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
  cursor:pointer;
}

.user-affinity-focus__option:hover,
.user-affinity-focus__option:focus-within{
  border-color:rgba(189,33,60,0.35);
  box-shadow:0 8px 18px -10px rgba(189,33,60,0.55);
  background-color:rgba(255,236,239,0.8);
}

.user-affinity-focus__option input[type="radio"]{
  margin-top:3px;
  accent-color:#a91b31;
}

.user-affinity-focus__option span{
  flex:1;
}

#user-affinity-modal .modal-close{
  background:none;
  border:none;
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
  color:#6b7280;
  transition:color .2s ease;
}

#user-affinity-modal .modal-close:hover{
  color:#dc2626;
}

#user-affinity-modal .modal-body{
  padding:20px 24px;
  overflow-y:auto;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:24px;
}

#user-affinity-modal .modal-body[hidden]{
  display:none;
}

.modal-tabs{
  display:flex;
  gap:8px;
  padding:0 24px;
  border-bottom:1px solid #e5e7eb;
  background-color:#f9fafb;
}

.modal-tabs[hidden]{
  display:none;
}

.modal-tab{
  border:none;
  background:none;
  padding:14px 18px;
  font:inherit;
  font-weight:600;
  color:#4b5563;
  cursor:pointer;
  border-bottom:3px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}

.modal-tab[hidden]{
  display:none;
}

.modal-tab:focus-visible{
  outline:3px solid rgba(59, 130, 246, 0.4);
  outline-offset:-3px;
}

.modal-tab.is-active{
  color:#111827;
  border-color:var(--brand, #1a349b);
  background-color:#fff;
}

.modal-tab-panel{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.modal-tab-panel[hidden]{
  display:none;
}

#user-affinity-modal .modal-footer{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  padding:16px 24px;
  border-top:1px solid #e5e7eb;
  background-color:#f9fafb;
}

.user-affinity-intro{
  margin:0;
  color:#374151;
  line-height:1.5;
}